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

three.js r75 pointLight shadows in wrong places

我有一个 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) 确保外层卫星的阴影不会出现在(靠近太阳的内层)行星地球上。

简而言之,您将事情间隔得太远了。

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

解决方法很简单:减少对象之间的 space。当十几个就足够时,绝对没有理由让对象彼此相距数千个单位。我解决了你的两个问题 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);