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)