Three.js r75 pointLight 阴影在错误的地方 [英] three.js r75 pointLight shadows in wrong places

问题描述

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

I have a jsfiddle containing a fixed Sun and Moons and a moving planet Earth which orbits the Sun.

这是两个 Lights(Ambient 和 Point)和示例对象的代码.

Here is the code for the two Lights (Ambient and Point) and example objects.

        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 照亮.

Firstly distant fixed moons are not illuminated by the PointLight even though they are within range.

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

Secondly shadows from the distant moons appear on the (Sun-orbitting) Earth even though the Earth is nearer the Sun than those fixed moons.

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

Note that an inner fixed moon (named Moon02, magenta in color) does get illuminated by the PointLight and it does cast a shadow on the Earth.

这是渲染器设置代码:-

Here is the Renderer set-up code:-

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

My Question = What needs to be done to (a) illuminate the outer moons and (b) ensure the shadows of outer moons do not appear on the (inner, nearer-to-Sun) planet Earth.

推荐答案

简而言之，你把事情隔得太远了.

Simply put, you're spacing things out too far.

从点光源计算阴影非常昂贵.事实上，THREE.js 只是在几个月前为其添加了功能.我还没有在文档中找到任何可靠的内容，但似乎对于从点光源计算出的阴影多远存在硬编码限制.

Calculating shadows from a point light is very expensive. In fact, THREE.js only added functionality for it a few months ago. I can't find anything solid in the documentation yet, but it seems likely that there's a hard coded limit on how far out shadows will be calculated from a point light.

解决方案很简单:减少对象之间的空间.当十几个就足够了时，绝对没有理由要求对象彼此相距数千个单位.我解决了你的两个问题只是将所有距离和比例减少了 10 倍.我也进行了调整PointLight 的强度，因为 10 太刺眼了哈哈.

The solution is easy: reduce the space between your objects. There's absolutely no reason that objects need to be thousands of units away from each other when a dozen will suffice. I solved both of your problems just by reducing all distances and scales by a factor of 10. I also tweaked the intensity of the PointLight because 10 was pretty harsh haha.

// 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);

这篇关于Three.js r75 pointLight 阴影在错误的地方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！