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)
