Utilizing JSONLoader to load several models simultaneously

Question

Utilizing JSONLoader to load several models simultaneously

Seeking advice on the most effective method for loading multiple models exported from Blender to JSON format.

In the provided example below, I am utilizing the static_objects array containing predefined object data and model URLs. These URLs are then iterated through in a for loop and passed to the JSONLoader. However, encountering incorrect references when accessing the static_objects array within the JSONLoader.load method.

Refer to the example code snippet.

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;
///////////////////////////

// Remaining JavaScript functions omitted for brevity //

initAll();

javascript three.js

Answer 1

Answer №1

To simplify the code and focus on the issue at hand, here is the original function:

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

In JavaScript, variables declared with var are not scoped how you might expect in other languages. The scope of a variable defined with var is the entire function, which could lead to unexpected behavior when initializing variables inline.

A better approach would be:

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

ES6 introduces let and const keywords, which provide block scoping. However, using these keywords may require transpilation for compatibility across all browsers. Until then, it's best practice to declare variables at the beginning of your functions to maintain clarity in your code.

Answer 2

To simplify the code and focus on the issue at hand, here is the original function:

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

In JavaScript, variables declared with var are not scoped how you might expect in other languages. The scope of a variable defined with var is the entire function, which could lead to unexpected behavior when initializing variables inline.

A better approach would be:

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

ES6 introduces let and const keywords, which provide block scoping. However, using these keywords may require transpilation for compatibility across all browsers. Until then, it's best practice to declare variables at the beginning of your functions to maintain clarity in your code.

Answer 3

Answer №2

My approach to this problem involved utilizing an existing function in the load method instead of creating a new one.

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

Answer 4

My approach to this problem involved utilizing an existing function in the load method instead of creating a new one.

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

Utilizing JSONLoader to load several models simultaneously

Answer №1

Answer №2

Similar questions

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Is it necessary for me to add the scraped information before I can retrieve it?

Displaying Additional Information - Displaying Fewer Information reveals a total of 31 rows rather than

Error message: Iframe chrome encountered a Uncaught DOMException when attempting to access the 'localStorage' property from 'Window': Document does not have permission

The functionality of Skrollr on mobile is currently not working properly due to the inability to prevent default actions

The auto-complete feature on Yahoo search occasionally displays outdated search suggestions

What is the best way to ensure the flat list only renders once?

"Utilize Three.js to construct walls that intersect at right angles in a

Performing a reverse image search request using Javascript/AJAX to query Google

A JQuery function linked to the click event of the body element triggers another click event right away

Efficiently eliminating empty query parameters with URLSearchParams

Concentrating on div elements using React

Utilizing the "apply" method with JavaScript OOP callbacks for dynamic context management

In vuex, dynamic modules share common data and do not have unique data

The spinal cord of design inquiry

Which is the PREFERRED choice for managing multiple form inputs in React: useState or useRef?

Angular 2: Changing HTTP Requests

Spin an object placed in a circular formation to face the center point, then give it another spin

Preventing Body Overflow Without Affecting Iframe Overflow in Meteor.js

Automatically updating the results section while executing SQL queries in PHP