Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 阴影未直接投射到导入的OBJ上_Javascript_Three.js_Webgl_Shadows - Fatal编程技术网

Javascript 阴影未直接投射到导入的OBJ上

Javascript 阴影未直接投射到导入的OBJ上,javascript,three.js,webgl,shadows,Javascript,Three.js,Webgl,Shadows,我想让这个物体投下阴影。但是在边缘有奇怪的阴影。我认为这个物体在“自身”的另一个组成部分上投射了一个阴影 有没有办法消除这种情况 这是小提琴: 这是强制性的代码,但是只要检查一下小提琴就行了 var container, stats; var camera, scene, renderer; var cube, plane; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; i

我想让这个物体投下阴影。但是在边缘有奇怪的阴影。我认为这个物体在“自身”的另一个组成部分上投射了一个阴影

有没有办法消除这种情况

这是小提琴:

这是强制性的代码,但是只要检查一下小提琴就行了

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

您需要将所有
灯光
参数设置为合理值。如果你不明白它们的用途,用谷歌搜索它们

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 );
让你的影子相机尽可能的紧

此外,在设置阴影摄影机时,请确保使用
轨道控制
或类似工具,以便您可以将摄影机向后拉,查看正在执行的操作

另外,你的相机在飞机附近是
0.1
,而远平面是
10000
。不好的。保持近距离飞行至少1小时。近平面的较小值可能导致深度排序精度问题

小提琴:


three.js r.58

我实际上需要对象本身来投射阴影。不是对它本身,而是对我真实场景中的其他相邻元素。但很明显,摆弄暗影摄影机为我解决了这个问题。谢谢你的提示,很好,我不知道。:)