three.js r75 pointLight shadows in wrong places

Question

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

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;

There are two problems.

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.

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;

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.

jered jered · Accepted Answer · 2016-04-20T00:13:32

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

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.

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 shadows in wrong places

1 Answers