three.js shadow map shows on back side issue. Is there a work around?

问题

I have an issue with shadow map showing on the back side of an object, I have been fighting with that for almost two days now, thinking I was surely doing something wrong.

Then I wrote this jsFiddle : http://jsfiddle.net/gui2one/ec1snfee/

code below :

// shadow map issue

var light ,mesh, renderer, scene, camera, controls;
var clock = new THREE.Clock({autoStart:true});
init();
animate();

function init() {
    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.shadowMapEnabled = true;
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( -58, 10, 29 );

    // controls
    controls = new THREE.OrbitControls( camera );

    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );

    // light
    light = new THREE.SpotLight();
    light.position.set( 20, 0, 0 );
    //light.target.position.set(1000,0,0);
    light.castShadow = true;
    light.shadowBias = -0.001;
    light.shadowCameraNear = 1;
    light.shadowCameraFar = 100;
    light.shadowMapWidth = 2048;
    light.shadowMapHeight = 2048;
    light.shadowCameraVisible = true;
    scene.add( light );    
    // axes
    scene.add( new THREE.AxisHelper( 5 ) );


var materialTest = new THREE.MeshPhongMaterial();
var planetTestGeo = new THREE.SphereGeometry(5);
var planetTest = new THREE.Mesh(planetTestGeo, materialTest);

planetTest.castShadow = true;
planetTest.receiveShadow = true;

scene.add(planetTest);
planetTest.position.set(-30,0,0);

var moonTestGeo = new THREE.SphereGeometry(1);
var moonTest = new THREE.Mesh(moonTestGeo, materialTest);

moonTest.castShadow = true;
moonTest.receiveShadow = true;

scene.add(moonTest);
moonTest.position.set(planetTest.position.x+10 ,planetTest.position.y-0.5 ,planetTest.position.z); 

    camera.lookAt(moonTest.position);

}

function animate() {

    requestAnimationFrame( animate );

    //controls.update();

    renderer.render( scene, camera );

}

and then I noticed this question ( more than 2 years ago ) THREE.JS Shadow on opposite side of light.

Is there a work around that now ? I am trying to make an animated solar system. And I can't use different objects , or different materials to solve this problem, because planets and moons evidently always rotate on themselves and around each other.

回答1:

Easy fix:

light.shadowBias = 0.001;

instead of

light.shadowBias = -0.001;

I've seen examples on the web using negative bias. I'm not sure if that is correct behaviour.

Good luck!

UPDATE

You will see some shadow acne on the light terminal on the sphere. This appears to be an issue with three.js shadow mapping methods and is due for an update AFAIK.

来源：https://stackoverflow.com/questions/27070747/three-js-shadow-map-shows-on-back-side-issue-is-there-a-work-around

标签

three.js