陰影不在正確的進口OBJ

Question

我試圖讓這個對象投下陰影。但邊緣有奇怪的陰影。我認爲物體投下陰影到「自己」的另一個組件

有沒有辦法刪除呢？

這裏是小提琴：http://jsfiddle.net/paulocoelho/qMqH7/3/

這裏是強制性的代碼，但只檢查小提琴..

var container, stats; 
var camera, scene, renderer; 
var cube, plane; 
var windowHalfX = window.innerWidth/2; 
var windowHalfY = window.innerHeight/2; 

init(); 

function init() { 
    container = document.createElement('div'); 
    document.body.appendChild(container); 

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, .1, 10000); 
    camera.position.x=50; 
    camera.position.y=50; 
    camera.position.z=50; 
    camera.lookAt(new THREE.Vector3(0,0,0)); 
    scene = new THREE.Scene(); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.shadowMapEnabled = true; 
    renderer.shadowMapSoft = true; 
    container.appendChild(renderer.domElement); 

    //var ambientLight = new THREE.AmbientLight(0x000000); 
    //scene.add(ambientLight); 

    light = new THREE.SpotLight(); 
    light.position.set(337,400,313); 
    light.castShadow = true; 
    light.shadowMapWidth = 3000; 
    light.shadowMapHeight = 3000; 
    // light.shadowCameraVisible = true; 
    scene.add(light); 

    var geometry = new THREE.PlaneGeometry(200, 200, 30, 30); 
    geometry.applyMatrix(new THREE.Matrix4().makeRotationX(- Math.PI/2)); 
    geometry.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(0,0,0))); 
    var material = new THREE.MeshLambertMaterial({ color: 0xEEEEEE }); 
    plane = new THREE.Mesh(geometry, material); 
    plane.receiveShadow = true; 
    scene.add(plane); 

    var loader = new THREE.OBJMTLLoader(); 
    loader.addEventListener("load", function (event) { 
     cube = event.content; 
     for(k in cube.children){ 
      cube.children[k].castShadow = true; 
      cube.children[k].receiveShadow = true; 
     } 
     scene.add(cube); 
     animate(); 
    }); 
    loader.load ("https://dl.dropboxusercontent.com/u/4334059/VM.obj", "https://dl.dropboxusercontent.com/u/4334059/VM.mtl"); 
} 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function render() { 
    cube.rotation.y += 0.01; 
    renderer.render(scene, camera); 
} 

Answer 1

您需要設置所有的light參數爲合理值。谷歌他們每個人，如果你不明白他們是什麼。

light = new THREE.SpotLight(0xffffff); 
light.position.set(200, 200, -200); 
light.castShadow = true; 
light.shadowMapWidth = 1024; // power of 2 
light.shadowMapHeight = 1024; 

light.shadowCameraNear = 200; // keep near and far planes as tight as possible 
light.shadowCameraFar = 500; // shadows not cast past the far plane 
light.shadowCameraFov = 20; 
light.shadowBias = -0.00022; // a parameter you can tweak if there are artifacts 
light.shadowDarkness = 0.5; 

light.shadowCameraVisible = true; 
scene.add(light); 

保持你的影子相機儘可能緊。

此外，當設置陰影相機時，一定要使用OrbitControls或類似的東西，以便您可以將相機拉回來，看看您在做什麼。

P.S.你的相機靠近飛機是0.1，遠機是10000。不好。將近平面保持在至少1.近平面的較小值會導致深度分類精度問題。

小提琴：http://jsfiddle.net/qMqH7/4/

three.js所r.58