1.1 Three.js基本框架.docx

5、{varstats=initStats();//创建渲染器，并设置视口大小和清除色varrenderer=newTHREE.WebGLRenderer();renderer.setClearColor(0x00204d);renderer.setSize(window.innerWidth,window.innerHeight);//将WebGL的输出canvas放置到div中$("#WebGL-output").append(renderer.domElement);//创建scene对象，用来容纳网格、相机、光源等对象varscene=newTHREE.

6、Scene();//创建相机varcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//设置相机位置，观察目标设置为场景中央camera.position.x=0;camera.position.y=0;camera.position.z=3;camera.lookAt(scene.position);renderer.render(scene,camera);});以上代码还使用了jquery库

7、，这不是必须的，但可以让某些DOM操作更加便捷。若现在运行程序，只会显示墨绿色的背景，我们需要在场景中添加一个黄色的三角形。8/8添加网格（Mesh）对象Three.js中绘制的绝大多数对象都是网格（Mesh），一个Mesh通常是由一个几何体（Geometry）对象和一个材质（Material）对象组合而成。其中Geometry对象保存了Mesh对象的顶点信息和索引信息，而Material对象保存与渲染效果相关的属性。通过设置材质可以改变物体的颜色、纹理贴图、光照模式等。Three.js并没有内置三角形的几何体对象，所以我们需要从几何体基类Geometry自

8、己定义顶点和索引。代码如下：vartriangleG