002_Three.js 中添加阴影 - [Three.js] - [阴影效果]

在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)