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;

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

祝你好运！

更新

你会在球体的光端子上看到一些阴影痤疮。这似乎是three.js阴影映射方法的问题，并且应该更新AFAIK。

three.js阴影贴图显示在背面问题上。有工作吗？

1 个答案: