Question

任何人都可以建议加载多个模型（从blender导出为JSON格式）的最佳方法是什么？

在下面的示例中，我使用填充了一些预定义对象数据的static_objects数组，这也是存储模型URL所有信息的地方。然后将这些URL传递给for循环中的JSONLoader。但由于某种原因，每当我访问static_objects方法中的JSONLoader.load数组时，我都会收到错误的引用。

请参阅下面的示例。

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:0.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 spot_light = new THREE.SpotLight( 0xC1C1C1, 0.4 );
    spot_light.castShadow = true;
    spot_light.shadowDarkness = 0.1;
    spot_light.shadowCameraNear = 0.1;
    spot_light.shadowCameraFar = 100;
    spot_light.shadowCameraFov = 45;
    spot_light.shadowMapWidth = 512; 
    spot_light.shadowMapHeight  = 512;
    spot_light.position.set( -1.8, 100, 2.5 );
    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 );
    var ambient_light = new THREE.AmbientLight( 0xD0D0D0, 0.25);
    scene.add(ambient_light);
}

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


function initObjects(){
    console.log("  - StaticObjects");
    for(var o = 0; o < static_objects.length; o++ ){
        var loader = new THREE.JSONLoader();
        var o_data = static_objects[o];
        loader.load(o_data.model_url, function(){
            console.log("loading object "+ o_data.name ) <----- it always refers to same object /// 
            ObjectsToLoad--;
            //object.scale.set( self.properties.size, self.properties.size, self.properties.size ) ;
        })
    }
}

function initAll(){
    console.log(" initializing:");
    initRenderer(window.innerWidth / 2, window.innerHeight / 2);
    initScene();
    initCamera(window.innerWidth / 2, window.innerHeight / 2);
    InitLights();
    initObjects();
    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

剥离与说明问题无关的代码，这是您原来的功能：

java -cp classes MyApplication
pause

这在JavaScript中并不像你对其他语言所期望的那样，因为function initObjects(){ for(var o = 0; o < static_objects.length; o++ ){ var loader = new THREE.JSONLoader(); var o_data = static_objects[o]; loader.load(o_data.model_url, function(){ console.log("loading object "+ o_data.name ) <----- it always refers to same object /// }) } }不是词法范围的。 var的范围限定在它定义的函数中，并影响其内联初始化，只发生一次。

你有效地写道：

var

ES6使用function initObjects(){ var loader = new THREE.JSONLoader(); var o_data = undefined; for(var o = 0; o < static_objects.length; o++ ){ if ( o_data === undefined ) { o_data = static_objects[o]; } loader.load(o_data.model_url, function(){ console.log("loading object "+ o_data.name ) <----- it always refers to same object /// }) } }和let关键字解决了这个问题，但您需要在构建过程中对代码进行转换，以使其在所有浏览器中都能正常运行。虽然这是一个完全不同的主题，但是当您仍然使用常规const时，您应该始终将函数的 start 中的变量声明为让事情变得更加清晰。

Answer 2

我通过将现有函数传递给load方法（而不是创建一个新方法）来解决这个问题。

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;  } } );
        ObjectsToLoad--;
        scene.add(mesh);
    }
}

使用JSONLoader加载多个模型

2 个答案: