Тени работают на three.js г-54, но не работает на Three.js г-84

Question

У меня есть проблемы с тенями на three.js

В этом случае: https://jsfiddle.net/manumid/q5qhjkka/2/ У меня есть куб с легким, указывающей Это. Он использует three.js r-54. Тень работает отлично.

Но в том же примере, используя тр.js r-84: https://jsfiddle.net/manumid/krpgr0x0/, тень не появляется.

Единственное различие между кодами, помимо Three.js версии, свет тени помощник (хотя это не имеет никакого отношения к моей проблеме теневой):

На г-54: spot.shadowCameraVisible = true;

On r-84: scene.add (new THREE.CameraHelper(spot.shadow.camera));

Спасибо!

Answer 1

Многие реквизиты, похоже, изменились между этими 30 версиями из трех. У меня его нет точно, но, надеюсь, это, по крайней мере, помогает? Многие имена 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>