three.js r75 pointLight 阴影在错误的地方

Question

我有一个jsfiddle，其中包含一个固定的太阳和月亮以及一个围绕太阳运行的移动行星地球。

这是两个灯光（环境和点）和示例对象的代码。

        var light2 = new THREE.AmbientLight(0x444444);//... for lighting the Sun and other MeshBasicMaterial meshes.
        scene.add(light2);

        //... PointLight
        //  http://threejs.org/docs/#Reference/Lights/PointLight
        var light3 = new THREE.PointLight( 0xffffff, 10, 150000,1);
        light3.castShadow = true;
        light3.shadow.camera.near = 1;
        light3.shadow.camera.far = 5000;
        light3.shadow.camera.fov = 90;
        // light3.shadowCameraVisible = true;
        light3.shadow.bias = 0.001;
        scene.add( light3 );            

        // SPHERES

        var sphereGeom = new THREE.SphereGeometry( 40, 32, 16 );
var SunMaterial = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
        this.Sun01 = new THREE.Mesh( sphereGeom.clone(), SunMaterial );
        Sun01.position.set(-500, 0, 220);           
        scene.add( Sun01 );
        //Sun01.castShadow = false;
        //Sun01.receiveShadow = false;

        light3.position.set( Sun01.position.x, Sun01.position.y , Sun01.position.z);

var moonMaterial = new THREE.MeshPhongMaterial( { color: 0xaa00aa } );
        var Moon02 = new THREE.Mesh( sphereGeom.clone(), moonMaterial );                
        Moon02.scale.set( 0.5,0.5,0.5 );
        Moon02.position.set(-200, 0, 220);
        scene.add( Moon02 );
        Moon02.castShadow = true;
        Moon02.receiveShadow = false;

有两个问题。

首先遥远的固定卫星即使在射程内也不会被 PointLight 照亮。

其次，来自遥远卫星的阴影出现在（绕太阳运行的）地球上，即使地球比那些固定的卫星更靠近太阳。

请注意，内部固定的月亮（名为 Moon02，颜色为洋红色）确实会被 PointLight 照亮，并且确实会在地球上投下阴影。

这是渲染器设置代码：-

renderer = new THREE.WebGLRenderer();
                renderer.setClearColor( 0x000022 );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );

                //... Enable Shadows
        renderer.shadowMap.enabled = true;//.shadowMapEnabled = true;
        //renderer.shadowMap.type    = THREE.BasicShadowMap;//
                //renderer.shadowMap.type    = THREE.PCFShadowMap
            renderer.shadowMap.type    = THREE.PCFSoftShadowMap;

我的问题 = 需要做什么来 (a) 照亮外层卫星并 (b) 确保外层卫星的阴影不会出现在（内部，更靠近太阳的）地球上。

Answer 1

简单地说，你把事情间隔得太远了。

从点光源计算阴影非常昂贵。事实上，THREE.js 只是为它添加了功能a few months ago。我在文档中还没有找到任何可靠的东西，但似乎对从点光源计算出的阴影有多远有硬编码限制。

解决方案很简单：减少对象之间的空间。当十几个就足够时，绝对没有理由让物体彼此相距数千个单位。我解决了你的两个问题just by reducing all distances and scales by a factor of 10. 我还调整了 PointLight 的强度，因为 10 太苛刻了哈哈。

// color, intensity, falloff radius, falloff amount
// if falloff radius is 0 then there is no falloff
var light3 = new THREE.PointLight( 0xffffff, 1, 0, 0);