Three.js--4.添加材质，灯光和阴影

在Three.js 里添加新的材质和灯光非常简单，

首先需要在场景中添加一个光源；

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);

如果我们现在渲染场景呢，跟之前是没有什么区别的，原因是不同的材质对光源的反应并不是相同的；

我们前一天示例中用的是基础材质，MeshBasicMaterial是不会对场景中的光源产生反应，而只会以指定

的颜色来渲染物体；所以我们需要更改场景中物体的材质。

Three.js--4.添加材质，灯光和阴影

Three.js 里有两种材质可以对光源产生反应：MeshLambertMaterial 和 MeshPongMaterial(后期对材质和灯光都会

有详细的介绍的哈），这里我们用第一种；

var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial({
                color: 0xcccccc
            });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
                color: 0xff0000,
                wireframe: false
            });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
                color: 0x7777ff,
                wireframe: false
            });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

添加和替换之后，我们快要完成了，球体和方块看起来好多了，不过还没有添加阴影；

渲染阴影需要花费大量的计算资源，因此默认情况下是不会生成阴影的，不过需要生成的话还是很简单的；

首先，要告诉renderer我们需要阴影

renderer.shadowMapEnabled=true;

然后呢，我们需要明确哪个物体投射阴影，哪个物体接受阴影，在我们的例子中，球体和方块将阴影投射到

地面上的，所以我们这样设置就好了

plane.receiveShadow = true;

cube.castShadow = true;

sphere.castShadow = true;

最后最后，我们要定义场景中的哪个光源可以产生阴影，不是所有的光源都可以产生阴影，示例中SpotLight

生成的光源可以产生阴影，同样设置下属性就好了

spotLight.castShadow = true;

over，看看效果吧

下一节，用动画扩展你的首个场景