three.js 阴影贴图显示在背面问题上。有解决办法吗？

Question

我遇到了在对象背面显示阴影贴图的问题，我已经为此苦苦挣扎了将近两天，我认为我肯定做错了什么。

然后我写了这个 jsFiddle：http://jsfiddle.net/gui2one/ec1snfee/

代码如下：

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

}

然后我注意到了这个问题（2 多年前） THREE.JS Shadow on opposite side of light.

现在有解决办法吗？ 我正在尝试制作一个动画太阳系。而且我不能用不同的物体或不同的材料来解决这个问题，因为行星和卫星显然总是自转自转。

Answer 1

简单修复：

light.shadowBias = 0.001;

而不是

light.shadowBias = -0.001;

我在网上看到过使用负面偏见的例子。我不确定这是否是正确的行为。

祝你好运！

更新

你会在球体的光端看到一些阴影粉刺。这似乎是三个.js 阴影映射方法的问题，需要更新 AFAIK。