THREE.js的阴影不完整

Question

我是javascript和THREE.js的初学者，需要帮助。

您可以在下面看到我所获得的

这是代码：

 // on initialise le moteur de rendu renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.getElementById('container').appendChild(renderer.domElement); // on initialise la scène scene = new THREE.Scene(); // on initialise la camera que l'on place ensuite sur la scène camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100000 ); camera.position.set(0, 0, 1000); scene.add(camera); // plane me = new THREE.Mesh(new THREE.PlaneGeometry(900,550), new THREE.MeshPhongMaterial({color: 0xffffff})); scene.add( me ); me.position.x = 130; me.position.y = 10; me.rotation.y = -20; // on créé un cube au quel on définie un matériau puis on l'ajoute à la scène cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshPhongMaterial({color:0x00ffff}) ); scene.add( cube ); cube.position.y = 0; cube.position.x = 20; cube.position.z = 0; cube.rotation.y = 0; scene.add( new THREE.AmbientLight( 0x212223) ); light = new THREE.SpotLight(0xffffff, 1); light.position.set(-300,-100,20); light.angle = Math.PI/5; light.shadowCameraVisible = true; scene.add(light); renderer.shadowMap.enabled = true; renderer.shadowMapDarkness = 1; light.castShadow = true; light.intensity = 0.8; cube.castShadow = true; cube.receiveShadow = true; me.receiveShadow = true; lightHelper = new THREE.SpotLightHelper( light ); scene.add(lightHelper); renderer.render( scene, camera ); 

我其余的代码更改了光线或立方体的x和y值，并且立方体的阴影并不总是完整的，我也不明白为什么...就像我是初学者一样，我认为我做错了在我的代码中。

Answer 1

是的，当我放置position.x = 300时，它的工作正常，但是它不适用于所有x值，我也不知道为什么（我的动画其余部分修改了x值）

阴影映射（通常）是这样工作的：

创建一个新的正交摄影机或透视摄影机（取决于是否使用定向光或点光源），将场景的z缓冲区渲染到纹理上，然后在渲染对象时，检查z缓冲区上的点是否对应于当前片段的z值比当前片段高，如果存在，则在阴影中。 如果它具有完全相同的值（由于深度缓冲区的精度，则为+-某个值），则说明它是正确的。

因为您需要一台照相机来在屏幕上渲染东西，所以它具有可以渲染东西的最小距离。

Tl; dr这次的剪切距离是您的祸根。