three.js新手入门教程( 四 ) three.js就是使用javascript来写3

物体
使用几何形状和材质就能创建物体了。最常用的一种物体就是网格（Mesh），网格是由顶点、边、面等组成的物体；其他物体包括线段（Line）、骨骼（Bone）、粒子系统（ParticleSystem）等。
创建物体需要指定几何形状和材质，其中，几何形状决定了物体的顶点位置等信息，材质决定了物体的颜色、纹理等信息。
创建网格
Mesh(geometry,material)
创建网格要把几何形状与材质传入其构造函数。
varmaterial=newTHREE.MeshLambertMaterial({
color:0xffff00
});vargeometry=newTHREE.CubeGeometry(1,2,3);varmesh=newTHREE.Mesh(geometry,material);
scene.add(mesh);
若不设置属性material ，则每次会随机分配一种wireframe为true的材质，每次刷新页面后的颜色是不同的。除了在构造函数中指定材质，在网格被创建后，也能对材质进行修改。
mesh.material=newTHREE.MeshLambertMaterial({
color:0xff0000});
几何变换
平移、缩放、旋转是物体三个常用属性。即为translate、scale、rotate三个属性。
平移
mesh.translateX(100);//沿着x轴正方向平移距离100
沿着向量(0,1,0)方向平移
varaxis=newTHREE.Vector3(0,1,0);//向量axis
mesh.translateOnAxis(axis,100);//沿着向量axis方向平移100
旋转
mesh.rotateX(Math.PI/4);//绕x轴旋转π/4
//绕(0,1,0)向量轴旋转π/8
varaxis=newTHREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis向量轴旋转π/8
缩放
mesh.scale.x=2.0;//x轴方向放大2倍
mesh.scale.set(0.5,0.5,0.5);//缩小为原来0.5倍
加载几何模型
Three.js有一系列导入外部文件的辅助函数，是在three.js之外的，使用前需要额外下载。 *.obj是最常用的模型格式，导入*.obj文件需要OBJLoader.js；导入带.mtl材质的.obj文件需要MTLLoader.js以及OBJMTLLoader.js 。
无材质模型
创建loader变量，用于导入模型：
varloader=newTHREE.OBJLoader();
接受两个参数，第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中。
loader.load('../lib/port.obj',function(obj){
mesh=obj;//储存到全局变量中
scene.add(obj);
});
默认的情况下，只有正面的面片被绘制，模型中部分可能穿模。而如果需要双面绘制，需要这样设置：
varloader=newTHREE.OBJLoader();
loader.load('../lib/port.obj',function(obj){
obj.traverse(function(child){
if(childinstanceofTHREE.Mesh){
child.material.side=THREE.DoubleSide;}
});
mesh=obj;
scene.add(obj);
});
有材质模型
代码中设置材质
在回调函数中设置模型的材质：
varloader=newTHREE.OBJLoader();
loader.load('../lib/port.obj',function(obj){
obj.traverse(function(child){
if(childinstanceofTHREE.Mesh){
child.material=newTHREE.MeshLambertMaterial({
color:0xffff00,
side:THREE.DoubleSide
});
}
});
mesh=obj;
scene.add(obj);
});
建模软件导出材质
在建模软件导出port.obj模型文件以及port.mtl材质文件，就需要使用MTLLoader.js与OBJMTLLoader.js ，并且要按改顺序引用：
调用方法：
varloader=newTHREE.OBJMTLLoader();
loader.addEventListener('load',function(event){
varobj=event.content;
mesh=obj;
scene.add(obj);
});
loader.load('../lib/port.obj','../lib/port.mtl');
光线
环境光
环境光是指场景整体的光照效果，环境光没有明确的光源位置，在各处形成的亮度也是一致的。
THREE.AmbientLight(hex)
在设置环境光时，只需要指定光的颜色。使用环境光渲染时，环境光并不在乎物体材质的color属性，而是ambient属性。 ambient属性的默认值是0xffffff 。