THREE.JS 2.0 场景及场景中的对象

THREE.Scene()

场景中的三要素
camera 相机
spotLight 光源
object (plane、cube...)物体
一个只有一个平面的简单场景中已经包含了几个对象
其中包括使用Scene.add(object)加载进场景的几个对象
场景渲染的时候camera对象会自动添加进来
从几个函数来理解THREE.Scene()对象
1、在场景中添加物体 Scene.Add()

this.addCube =  function (){
                //添加正方体
                var cubeSize = Math.ceil(Math.random() * 3);
                var cubeGeometry = new THREE.CubeGeometry(cubeSize , cubeSize, cubeSize);
                var cubeMaterial = new THREE.MeshLambertMaterial ({color:Math.random()*0xffffff});
                var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
                cube.name = "cube-"+scene.children.length;//给正方体命名 为了后期更好操作
                cube.position.x = -30+Math.round(Math.random()*planeGeometry.parameters.width);
                cube.position.y = Math.random()*5;
                cube.position.z = -20+ Math.round(Math.random()*planeGeometry.parameters.height);
                scene.add(cube);
                this.numberOfObjects = scene.children.length;
            };

2、移除物体Scene.Remove()

this.removeCube = function(){
                var allChildren = scene.children;
                var lastObject = allChildren[scene.children.length-1];
                if(lastObject instanceof  THREE.Mesh){
                    scene.remove(lastObject);
                    this.numberOfObjects = scene.children.length;
                }
            };

3、获取场景中所有子对象列表Scene.children

this.numberOfObjects = scene.children.length;

4、利用name 属性，获取场景中某个特定的物体Scene.getChildByName()
5、这是一个回调函数返回所有子对象列表scene.traverse()
在这里的效果同使用for 循环遍历children这个属性

scene.traverse(function(e){
                if(e instanceof THREE.Mesh && e != plane){
                    e.rotation.x += controls.rotationSpeed;
                    e.rotation.y += controls.rotationSpeed;
                    e.rotation.z += controls.rotationSpeed;
                }

6、雾化属性在添加完场景后即可添加，可以使整个场景有一种雾化的效果
scene.fog = new THREE.Fog(0xffffff,0.015,100);
7、使场景中的所有物体都使用相同的材质
scene.overrideMaterial = new THREE.MeshLambertMaterial({color:0xffffff});

几何对象

var geom = new THREE.Geometry()

属性

geom.vertices = vertices vertices数组定义了构成几何体的点；
geom.faces = faces 将vertices里面的点连接起来，创建成三角面片，就形成了faces数组；
geom.verticesNeedUpdate = true 告诉geom对象上面的属性需要更新；

函数

geom.computeCentroids()计算geom中face数组里每一个面的重心；
geom.computeFaceNormals()该函数用来重新计算侧面，从而完成整个模型的更新
geom.mergeVertices()从字面上的意思可以理解为将几何体的面融成一个立体；
geom.clone()创建出一个geom对象的副本，赋予不同的材质后，就可以使用这个副本创建不同的网格对象。

网格对象（Mesh）

属性

mesh.position
mesh.rotation
mesh.scale
mesh.translateX
mesh.translateY
mesh.translateZ

设置对象位置的三种方式

1、直接设置坐标

cube.position.x = 10;
cube.position.y = 3;
cube.position.z = 1;

2、一次性设置

cube.position.set(10,3,1)

3、通过对象赋值

cube.position = new THREE.Vector3(10,3,1)

GUI中的方法变量

1、在controls 中添加方法变量
属性变量是这样的：this.positionX = 1;
方法变量：

this.translate = function(){
  mesh.translateX(this.translateX);//x方向平移
  ...
  controls.positionX = mesh.position.x;//将改变后的位置赋值给controls的
  ...
}

2、把对象传递给gui （无取值范围）
gui.add(controls,'translate')
这样在gui中点击的时候就可以调用translate方法

THREE.js库支持使用多种材质：

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom,materials)//其中materials是设置材料的对象数组
这个方法创建出来的不是一个THREE.Mesh实例，而是materials数组里面的每一个材质都会创建一个实例所以要像使用Scene对象一样使用这个(THREE.Mesh)