javascript - 阴影没有出现在 Three.js 的场景中？

Question

相机:

 Camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 10000);
 Camera.position.set( 150, 400, 400);
  Scene.add(Camera);

光

 Light = new THREE.SpotLight(0xffccff,.5, 0, Math.PI/2, 1);

Light.position.set(0, 2000, 0);
Light.castShadow = true;
Light.shadowBias = -0.0002;

Light.shadowCameraNear = 850;
Light.shadowCameraFar = 8000;
Light.shadowCameraFov = 600;
Light.shadowDarkness = .7;

Light.shadowMapWidth = 2048;
Light.shadowMapHeight = 2048;
Scene.add(Light);

渲染器

 Renderer = new THREE.WebGLRenderer({
    antialias: true,
    sortObjects: false,
    preserveDrawingBuffer: true,
    shadowMapEnabled: true

});

    document.body.appendChild(Renderer.domElement);
    Renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    Renderer.shadowMap.cullFace = THREE.CullFaceBack;
    Renderer.gammaInput = true;
    Renderer.gammaOutput = true;
    Renderer.setSize(window.innerWidth, window.innerHeight);

我使用这个功能来添加3d模型

 function getModel(path,texture) {

            var Material = new THREE.MeshPhongMaterial({shading: THREE.SmoothShading,
                specular: 0xff9900,
                shininess: 0,
                side: THREE.DoubleSide,
                shading: THREE.SmoothShading

            });


           Loader = new THREE.JSONLoader();
            Loader.load(path,function(geometry){

                geometry.mergeVertices();
                geometry.computeFaceNormals();
                geometry.computeVertexNormals();

                TextureLoader.load(texture,function(texture){


                Mesh = new THREE.Mesh(geometry, Material);
                Mesh.material.map =texture;
                Mesh.material.map.wrapS = THREE.RepeatWrapping;
                Mesh.material.map.wrapT = THREE.RepeatWrapping;
                Mesh.material.map.repeat.set(38,38);
                //Mesh.position.y -= 1;
                Mesh.position.y = 160;
                    Mesh.position.x = 0;
                    Mesh.position.z = 0;
                Mesh.scale.set(40,40,40);
                Mesh.castShadow = true;
                Mesh.receiveShadow = true;
                Scene.add(Mesh);

                });
            });
        }

接收阴影的平面是

var planeGeometry = new THREE.PlaneBufferGeometry(100,100);
  var planematerial  = new THREE.MeshLambertMaterial(
  {
    shininess: 80,
    color: 0xffaaff,
    specular: 0xffffff
  });

var plane = new THREE.Mesh(planeGeometry,planematerial);
plane.rotation.x = - Math.PI / 2;
plane.position.set(0,100,0);
plane.scale.set( 10, 10, 10 );
plane.receiveShadow = true;
plane.castShadow = true;
Scene.add(plane);

我只是尝试调整灯光的位置并调整shadowCameraNear、Light.shadowCameraFar和Light.shadowCameraFov的值。但并非没有看到任何变化

Answer 1

相机位于 (150, 400, 400)，转换阴影的物体位于 (0, 160, 0)，接收阴影的物体位于 (0, 100, 0) 并且设置了shadowCameraNear截锥体850。也就是说，您的相机距离两个阴影对象分别约为 200 和 400 个单位，但您在平截头体附近查看的阴影距离为 850 个单位。调整你的定位。您可以设置

Light.shadowCameraVisible = true;

在 Debug模式下显示相机视锥体以提供帮助。