在Three.js中设置阴影效果，有多个地方需要设置属性。


1.渲染器

//初始化渲染器

function initRenderer() {

    var renderer = new THREE.WebGLRenderer();

    renderer.shadowMap.enabled = true;//关键

    renderer.shadowMapSoft = true;//关键

    renderer.shadowMap.type = THREE.PCFSoftShadowMap;//关键

    renderer.setClearColor(new THREE.Color(0x000000));

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.getElementById("entryNode").appendChild(renderer.domElement);

    return renderer

}

**2.地板**
```javascript
var planeGeometry = new THREE.PlaneGeometry(300,300,20,20);
var planeMaterial = new THREE.MeshPhongMaterial({
color:0x222222,
side: THREE.Double
});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -5;
plane.position.z = 0
plane.receiveShadow = true;//关键，特别要注意的是receiveShadow

scene.add(plane)

</br>

**3.光源**

```javascript

var spotlight = new THREE.SpotLight(0xffffff);

spotlight.position.set(-40,60,-10);

spotlight.castShadow = true//关键

scene.add(spotlight);

**4.物体**
```javascript
var cubeGeometry = new THREE.BoxGeometry(20,20,20);
var cubeMaterial = new THREE.MeshLambertMaterial({
color:0xffaaaa,
wireframe:true
});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
cube.position.x = 0; cube.position.y = 10; cube.position.z = 80;
cube.castShadow = true;//关键

scene.add(cube)

var sphereGeometry = new THREE.SphereGeometry(20,40,50);

var sphereMaterial = new THREE.MeshLambertMaterial({

color:0x777777,

wireframe: true

});

var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

sphere.position.y = 20

sphere.castShadow = true;//关键

scene.add(sphere)