WebGL Lesson3 基本组件

今天我们来看看第一个程序的基本组件，即创建一个三维场景程序，到底需要哪些东西。

• Scene

    var scene= new THREE.Scene();

通过这条语句，我们创建一个场景，可以理解为舞台戏台，不过里面啥都没有。（不可省略）。

• Camera

 var camera= new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);

这条语句类似于创建了一个相机，可以理解为观众，当然里面包含了视角，长宽比，还有位置及你能看多近多远等。

（不可省略）

• Renderer

 var renderer= new THREE.WebGLRenderer();

这条语句创建了渲染组件，可以理解为导演，它的作用就是让整个三维场景按照指定规则运行起来。

• Gemometry

var gemometry = new THREE.CubeGeometry(4,4,4);

var material = new THREE.MeshBasicMaterial({color:0x22ff22,wireframe:true});

var cube = new THREE.Mesh(gemometry,material);

这几条语句是创建了一个几何体。可以理解为演员，主角等。看就是看它的表演啦。

第一条语句是告诉我们要创建一个什么样的几何体。

第二条语句是说你打算用什么材料。

第三条语句是包装一下，成了，搞定。

创建结束后，你首先得把演员放到舞台里面，

scene . add ( cube );

接着导演把所有的东西放入场地，

//把canvas加入到body

document . body . appendChild ( renderer . domElement );

接着观众及演员各就各位，最后导演只要说action，好戏就开始了。

renderer . render ( scene , camera );