three.js陰影地圖顯示在背面問題。有沒有解決辦法？

我有一個陰影貼圖顯示在對象背面的問題，我一直在爲此打了差不多兩天的時間，認爲我確實在做錯事。three.js陰影地圖顯示在背面問題。有沒有解決辦法？

然後我寫這個的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。

現在是否有解決方法？我想製作一個動畫太陽系。我不能用不同的物體或不同的材料來解決這個問題，因爲行星和衛星顯然總是在自己和周圍旋轉。

來源

2014-11-21 gui2one

簡單的應對辦法的

light.shadowBias = 0.001;

代替

light.shadowBias = -0.001;

我已經看到了使用負偏壓在網絡上的例子。我不確定這是否是正確的行爲。

祝你好運！

UPDATE

你會看到在球體上的光終端上的一些影子痤瘡。這似乎是three.js陰影映射方法的問題，並且是由於更新AFAIK所致。

來源

2014-11-21 22:00:08 beiller

^^這是如此簡單，我倒像一個白癡...我想我堅持消極價值，因爲沒有痤瘡，沒有意識到這是造成這個問題。非常感謝你 – gui2one 2014-11-21 22:48:56

three.js陰影地圖顯示在背面問題。有沒有解決辦法？

回答

相關問題