Question

我已经从Blender导出了两个模型，每个模型使用最新的three.js导出器到一个单独的json文件，然后我尝试加载它并添加到我的测试应用程序。我已经设置了所有必需的参数来启用阴影投射，但仍然没有阴影出现..任何关于这里可能出错的想法？

var renderer, camera, scene, controls;

/////// JSON DATA ////
var static_objects = [  
      {  
         name:"ground",
         pos:{  
            x:-45.0, y:-1, z:14.0
         },
         size:20,
         model_url: "obj.moon_ground.json",
      },
      {  
         name:"cylinder",
         pos:{  
            x:-20.0, y:5.0, z:0.0
         },
         size:10,
         model_url:"obj.cylinder.json",
      }
];

var ObjectsToLoad =  static_objects.length || 0;
///////////////////////////


function initRenderer( width, height){
    console.log("  - renderer");
    if(Detector.webgl){
        renderer = new THREE.WebGLRenderer({antialias:true});
    }else{
        renderer = THREE.CanvasRenderer();
    }
    //// container ////
    container  = document.createElement( 'div' );
    document.body.appendChild( container );
    /////////////////////

    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( width, height );
    renderer.shadowMap.enabled = true;
    renderer.shadowMapSoft = true;
    renderer.setClearColor( 0x142639, 1 );
    ///////////////////////
    container.appendChild( renderer.domElement );
}

function initCamera(width, height){
    console.log("  - camera");
    camera = new THREE.PerspectiveCamera(55, width/height, 1, 100 );
    camera.position.set(17.05217, 8.07079, 0.0);
    camera.lookAt( static_objects[1].pos );
    controls = new THREE.OrbitControls( camera );
}

function InitLights(){
    console.log("  - lights");
    var ambient_light = new THREE.AmbientLight( 0xD0D0D0, 0.25);
    scene.add(ambient_light);
    var spot_light = new THREE.SpotLight( 0xC1C1C1 );
    spot_light.position.set( -1.8, 38, 2.5 );
    spot_light.castShadow = true;
    spot_light.shadowDarkness = 3.5;
    spot_light.shadowCameraNear = 0.1;
    spot_light.shadowCameraFar = 41;
    spot_light.shadowCameraFov = 45;
    spot_light.shadowMapWidth = 1024; 
    spot_light.shadowMapHeight  = 1024;
    spot_light.target.position.set(  static_objects[1].pos.x, static_objects[1].pos.y, static_objects[1].pos.z );
    scene.add(spot_light);
    var c_helper = new THREE.CameraHelper( spot_light.shadow.camera );
    scene.add( c_helper );
}

function initScene(){
    console.log("  - scene");
    scene = new THREE.Scene();
}


function loadObjects(){
    console.log("  - StaticObjects");
    var loader = new THREE.JSONLoader();
    for(var o = 0; o < static_objects.length; o++ ){
        var o_data = static_objects[o];
        loader.load( o_data.model_url, initObject(o) );
    }
}

function initObject(o_id){
    console.log("loading object "+ o_id );
    return function(geometry, materials) {
        geometry.translate( 0.0, 0.0, -2.0 ); 
        mesh =  new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
        mesh.scale.set( static_objects[o_id].size, static_objects[o_id].size, static_objects[o_id].size ) ;
        mesh.position.set(  static_objects[o_id].pos.x, static_objects[o_id].pos.y, static_objects[o_id].pos.z );
        mesh.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true; node.receiveShadow = true;  } } );
        mesh.castShadow = true;
        mesh.receiveShadow = true; 
        mesh.rotation.y = -Math.PI/2;
        ObjectsToLoad--;
        scene.add(mesh);
    }
}

function initAll(){
    console.log(" initializing:");
    initRenderer(window.innerWidth / 2, window.innerHeight / 2);
    initScene();
    initCamera(window.innerWidth / 2, window.innerHeight / 2);
    InitLights();
    loadObjects();
    animate();
}

function animate(){
    window.requestAnimationFrame( animate );
    if(ObjectsToLoad === 0){
        render_all();
    }
}

function render_all(){
        //var timer = Date.now() * 0.001;
        controls.update();
        renderer.render(scene, camera);
}

initAll();

Answer 1

似乎 spot_light 必须沿Y轴向上移动一点点。现在它完美无缺。

导入的json模型没有投射阴影

1 个答案: