与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;这次裁剪距离是你的祸根。