我在三个.js 上遇到阴影问题
在这种情况下：https://jsfiddle.net/manumid/q5qhjkka/2/ 我有一个立方体，有一个光指向它。它使用了三个.js r-54。阴影效果很好。
但是在同一个例子中，使用three.js r-84:https://jsfiddle.net/manumid/krpgr0x0/阴影没有出现。
代码之间的唯一区别是，除了three.js版本之外，还有光影助手（虽然这与我的阴影问题无关）：
在 r-54 上：
spot.shadowCameraVisible = true;
在 r-84 上：
scene.add (new THREE.CameraHelper(spot.shadow.camera));
谢谢！
【问题讨论】：
这 30 个版本的三个版本之间似乎有很多道具发生了变化。我没有它看起来完全一样，但希望这至少有帮助？许多 shadow 和 shadowMap 名称位于不同的位置，并且 Spotlight 现在拥有更多控件。可以在这里找到一个很好的围栏，看看属性如何影响光线https://threejs.org/examples/#webgl_lights_spotlight
https://jsfiddle.net/4to72rkn/
var scene, camera, renderer, cube, cubeM, terrain, spot;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, 400 / 300, 0.01, 10000);
camera.position.set(600, 0, 5000);
scene.add(camera);
renderer = new THREE.WebGLRenderer()
renderer.setClearColor (0xdddddd, 1)
renderer.setSize(400, 300);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container = document.getElementById('canv_0')
container.appendChild(renderer.domElement);
cubeM = new THREE.MeshPhongMaterial({
color: 0xff0000
});
cube = new THREE.Mesh(
new THREE.CubeGeometry(1000, 1000, 1000), cubeM);
cube.position.set(0, 0, 0);
cube.rotation.set(0, 0, 0);
cube.castShadow = true;
scene.add(cube);
terrain = new THREE.Mesh(
new THREE.CubeGeometry(10000, 1000, 10000), new THREE.MeshPhongMaterial({
color: 0x00ff00
}));
terrain.receiveShadow = true;
terrain.position.set(0, -2000, 0);
terrain.rotation.set(0, 0, 0);
scene.add(terrain);
spot = new THREE.SpotLight( 0xffffff, 1 );
spot.shadow.camera.near = 1000;
spot.shadow.camera.far = 10000;
spot.castShadow = true;
spot.position.set(-1000, 2000, 1500);
spot.distance = 20000;
spot.penumbra = 1;
scene.add(spot);
scene.add (new THREE.CameraHelper(spot.shadow.camera));
(function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>
<div id="canv_0" width="400" height="300">
</div>【讨论】：