Three.JS 添加灯光、材质和阴影（第一个例子）

three.js中都多种灯光和材质，这里只是添加了一种灯光，聚光灯spotLight。

首先构建一个spotLight对象：

var spotLight = new  THREE.SpotLight（0xFFFFFF）；

指定光源的位置，从何处开始照射：

spotLight.position.set（-40,60，-10）；

把光源变量加入到场景：

scene.add（spotLight）；

材质：MeshBasicMaterial是基本的材质模型，它对光源产生任何反应。
MeshLambertMaterial 材质和MeshPhongMaterial材质会对光源产生反应。具体的区别不太了解。如果要物体对光照产生反应，把材质改为上述中的一种。

把第一个例子中的立方体的材质修改为 MeshLambertMaterial ：

var  cubeMaterial = new THREE.MeshLambertMaterial（{color:0xffffff}）;

阴影：Three.JS默认是不渲染出阴影的，这是比较耗费计算资源的。但是可以指定让渲染的时候渲染出阴影。

确定让渲染器渲染出阴影：

renderer.shadowMapEnabled = true；

指出那个物体会接受物体投射出的阴影，就是说，物体投射出的阴影会显示在哪个物体。例子中，指定平面会接受物体投射出的阴影，就是说其他物体投射出的阴影会出现在平面上，不会跑到其他地方。

指定平面接受物体投射出的阴影：

plane.receiveShadow = true；

指定那个物体会投射阴影，指定哪个物体会投射阴影，不指定的物体就不会投射阴影。
指定立方体投射会投射阴影：

cube.castShadow = true；

最后，指定由哪个光源照射物体来投射阴影，并不是所有的光源都可以产生阴影。物体有阴影，必须要有光源照射吧！

指定由前面建立的聚光灯spotLight来照射物体产生阴影：

spotLight.castShadow = true；

代码如下：