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

当环境光使用的颜色比较明亮，渲染的颜色往往会过饱和。因此，环境光通常使用白色或者灰色，作为整体光照的基础。
点光源
点光源是一种单点发光，照射所有方向的光源。点光源照到不同物体表面的亮度是线性递减的。
THREE.PointLight(hex,intensity,distance)
其中， hex是光源十六进制的颜色值；intensity是亮度，默认值为1 ，表示100%亮度；distance是光源最远照射到的距离，默认值为0 。
varlight=newTHREE.PointLight(0xffffff,2,100);
light.position.set(0,1.5,2);
scene.add(light);
聚光灯
聚光灯是一种特殊的点光源，它能够朝着一个方向投射光线。聚光灯投射出的是类似圆锥形的光线，与现实中看到的聚光灯是一致的。
THREE.SpotLight(hex,intensity,distance,angle,exponent)
angle是聚光灯的张角，默认值是Math.PI/3 ，最大值是Math.PI/2；exponent是光强在偏离target（target需要在之后定义，默认值为(0,0,0)）的衰减指数，默认值是10 。
在调用构造函数之后，除了设置光源本身的位置，一般还需要设置目标点target：
light.position.set(x1,y1,z1);light.target.position.set(x2,y2,z2);
除了设置light.target.position的方法外，如果想让聚光灯跟着某一物体移动（真正的聚光灯），可以target指定为该物体：
varcube=newTHREE.Mesh(newTHREE.CubeGeometry(1,1,1),newTHREE.MeshLambertMaterial({color:0x00ff00}));
varlight=newTHREE.SpotLight(0xffff00,1,100,Math.PI/6,25);
light.target=cube;
平行光
对于任意平行的平面，平行光照射的亮度都是相同的，而与平面所在位置无关。
THREE.DirectionalLight(hex,intensity)
对于平行光而言，设置光源位置尤为重要。
varlight=newTHREE.DirectionalLight();
light.position.set(2,5,3);
scene.add(light);
注意，这里设置光源位置并不意味着所有光从(2,5,3)点射出（如果是的话，就成了点光源），而是意味着，平行光将以矢量(-2,-5,-3)的方向照射到所有平面。因此，平面亮度与平面的位置无关，而只与平面的法向量相关。只要平面是平行的，那么得到的光照也一定是相同的。
阴影
阴影的形成也就是因为比周围获得的光照更少。因此，要形成阴影，光源必不可少。
在Three.js中，能形成阴影的光源只有平行光THREE.DirectionalLight与聚光灯THREE.SpotLight；而相对地，能表现阴影效果的材质只有THREE.LambertMaterial与THREE.PhongMaterial 。
初始化
首先告诉渲染器渲染阴影：
renderer.shadowMapEnabled=true;
然后，对于光源以及所有要产生阴影的物体调用：
xxx.castShadow=true;
对于接收阴影的物体调用：
xxx.receiveShadow=true;
这就是产生阴影效果的前置条件。
创建阴影
为了看到阴影照相机的位置，通常可以在调试时开启light.shadowCameraVisible=true 。
对于聚光灯，需要设置shadowCameraNear、shadowCameraFar、shadowCameraFov三个值，类比我们在第二章学到的透视投影照相机，只有介于shadowCameraNear与shadowCameraFar之间的物体将产生阴影， shadowCameraFov表示张角。
对于平行光，需要设置shadowCameraNear、shadowCameraFar、shadowCameraLeft、shadowCameraRight、shadowCameraTop以及shadowCameraBottom六个值，相当于正交投影照相机的六个面。同样，只有在这六个面围成的长方体内的物体才会产生阴影效果。
light.castShadow=true;light.shadow.camera.top=180;light.shadow.camera.bottom=-100;light.shadow.camera.left=-120;light.shadow.camera.right=120;
动作渲染
原理
对于Three.js程序而言，动作渲染的实现是通过在秒中多次重绘画面实现的。 FPS（FramesPerSecond）指每秒画面重绘的次数。 FPS越大，则渲染效果越平滑，当FPS小于20时，一般就能明显感受到画面的卡滞现象。当FPS足够大（比如达到60），再增加帧数人眼也不会感受到明显的变化，反而相应地就要消耗更多资源。