背面的问题上显示了three.js阴影图。附近有工作吗?

背面的问题上显示了three.js阴影图。附近有工作吗?,three.js,Three.js,我对物体背面的阴影图有一个问题,我已经和它斗争了将近两天了,我认为我肯定做错了什么 然后我写了这个JSFIDLE: 代码如下: // shadow map issue var light ,mesh, renderer, scene, camera, controls; var clock = new THREE.Clock({autoStart:true}); init(); animate(); function init() { // renderer renderer

我对物体背面的阴影图有一个问题,我已经和它斗争了将近两天了,我认为我肯定做错了什么

然后我写了这个JSFIDLE:

代码如下:

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

}
然后我注意到这个问题(两年多前)

现在有办法解决这个问题吗? 我正在尝试制作一个生动的太阳系。我不能用不同的物体或不同的材料来解决这个问题,因为行星和卫星显然总是自转和围绕彼此旋转

轻松修复:

light.shadowBias = 0.001;
而不是

light.shadowBias = -0.001;
我在网上看到过使用负面偏见的例子。我不确定这是不是正确的行为

祝你好运

更新


你会在球体上的灯光终端上看到一些暗影。这似乎是三个.js阴影映射方法的问题,需要尽快更新。

^^太简单了,我觉得自己像个白痴。。。我想我坚持使用负值是因为没有痤疮,没有意识到这是导致这个问题的原因。非常感谢你