阴影不在正确的进口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