三.js 阴影贴图显示在背面问题上.有解决办法吗? [英] three.js shadow map shows on back side issue. Is there a work around?

问题描述

我在对象背面显示阴影贴图时遇到问题，我已经为此纠结了近两天，认为我肯定做错了什么.

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

代码如下:

//阴影贴图问题var 灯光、网格、渲染器、场景、相机、控件；var clock = new THREE.Clock({autoStart:true});在里面();动画()；函数初始化(){//渲染器renderer = new THREE.WebGLRenderer();renderer.shadowMapEnabled = true;renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild(renderer.domElement);//场景场景 = 新的 THREE.Scene();//相机camera = new THREE.PerspectiveCamera( 40, window.innerWidth/window.innerHeight, 1, 10000 );camera.position.set( -58, 10, 29 );//控件控件 = 新的 THREE.OrbitControls( 相机 );//周围场景添加(新三环境光(0x222222))；//光光 = 新 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;场景添加(光)；//轴场景添加(新三轴助手(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;场景添加(行星测试)；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;场景.添加(月亮测试)；MoonTest.position.set(planetTest.position.x+10,planetTest.position.y-0.5,planetTest.position.z);camera.lookAt(moonTest.position);}函数动画(){requestAnimationFrame( 动画 );//controls.update();renderer.render(场景，相机)；}

然后我注意到这个问题(两年多前)THREE.JS 光对面的阴影.>

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

解决方案

简单修复:

light.shadowBias = 0.001;

代替

light.shadowBias = -0.001;

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

祝你好运！

更新

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

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.

解决方案

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.

这篇关于三.js 阴影贴图显示在背面问题上.有解决办法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！