陰影工作three.js所R-54，但不工作的three.js所R-84

Question

我有一個問題與three.js所

在這種情況下的陰影：https://jsfiddle.net/manumid/q5qhjkka/2/我有一個光指向一個立方體它。它使用three.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));

謝謝！

Answer 1

很多道具似乎在三個版本中有所變化。我沒有看起來完全一樣，但希望這至少有助於？很多shadow和shadowMap的名字都在不同的地方，現在聚光燈下的控件有很多。一個好的圍欄看到屬性如何影響光線可以在這裏找到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>