What is the best way to load a model and save it to a variable for future use?

Question

What is the best way to load a model and save it to a variable for future use?

One issue I'm facing involves loading a model in this manner:

var Beech;
var loader = new THREE.JSONLoader();
loader.load( "./models/trees/Beech/Beech.json", function( geometry, materials ) {
Beech = addMorphTree(geometry,materials,0.5); });

and utilizing it like so :

function addMorphTree(geometry,material,scale){
            mat=new THREE.MeshFaceMaterial( material );
            mat.side=THREE.DoubleSide;
            Tree = new THREE.Mesh( geometry,mat);
            Tree.scale.set(scale,scale,scale);
            //Tree.position.set(x,y,z);
            Tree.rotation.x = Math.PI/2;

            //scene.add( Tree );
        return Tree;}

I am wondering how I can use the 'Beech' variable to create duplicates of the model without having to load it repeatedly. When attempting to use

scene.add(Beech);

outside the loader, the model fails to appear. I've come across similar queries, but the solutions involve adding the model to the scene inside the loader.

javascript model three.js load

Answer 1

Answer №1

It seems that the model doesn't appear in the scene when attempting to add it outside of the loader because the loading process is asynchronous. This means that while the loader is loading, the rest of the code continues execution. Therefore, trying to add "Beech" to the scene right after the loading function would result in it not being fully loaded yet.

var Beech;
var loader = new THREE.JSONLoader();
loader.load( "./models/trees/Beech/Beech.json", function( geometry, materials ) {
Beech = addMorphTree(geometry, materials, 0.5); });
scene.add(Beech);  // <-- this line will execute before the function above is completed,
                   // causing an undefined variable to be added to the scene.

If you need multiple instances of the variable, you could consider using the clone() function. Since Beech is a Mesh object and Mesh inherits from Object3D, it can also make use of Object3D member functions.

var Beech;
var loader = new THREE.JSONLoader();
loader.load( "./models/trees/Beech/Beech.json", function( geometry, materials ) {
Beech = addMorphTree(geometry, materials, 0.5); 
for(var i=0; i<5; i++){
  scene.add(Beech.clone()) //creates 5 trees
}
});

Answer 2

It seems that the model doesn't appear in the scene when attempting to add it outside of the loader because the loading process is asynchronous. This means that while the loader is loading, the rest of the code continues execution. Therefore, trying to add "Beech" to the scene right after the loading function would result in it not being fully loaded yet.

var Beech;
var loader = new THREE.JSONLoader();
loader.load( "./models/trees/Beech/Beech.json", function( geometry, materials ) {
Beech = addMorphTree(geometry, materials, 0.5); });
scene.add(Beech);  // <-- this line will execute before the function above is completed,
                   // causing an undefined variable to be added to the scene.

If you need multiple instances of the variable, you could consider using the clone() function. Since Beech is a Mesh object and Mesh inherits from Object3D, it can also make use of Object3D member functions.

var Beech;
var loader = new THREE.JSONLoader();
loader.load( "./models/trees/Beech/Beech.json", function( geometry, materials ) {
Beech = addMorphTree(geometry, materials, 0.5); 
for(var i=0; i<5; i++){
  scene.add(Beech.clone()) //creates 5 trees
}
});

What is the best way to load a model and save it to a variable for future use?

Answer №1

Similar questions

Retrieve information from an SQL database using user input in a Classic ASP form without the need to refresh the page

The error message "Evaluating this.props.navigation: undefined is not an object" indicates that there

Unleashing the power of plugins and custom configurations in your next.js next.config.js

A guide on how to assign a placeholder as the default value for a date picker

Ways to usually connect forms in angular

Enhance a React component by including additional properties when passing it into another component through props

In React js, what is the best way to retrieve the first unique ID element as well as the last unique ID element from an

Regular expression that can be used to extract information from a text file by filtering and returning only

Is it possible to trigger an action in Vue Store using a Window/onunload event?

Modifying button appearance based on state change in AngularJS

AngularJS promises are known for returning the object itself instead of just the resolved value

Steps for adding an HTML string to a div element using Ajax

Ways to automatically scroll text inside a div based on the div's width

Create a custom shader material to display a video with THREE

What is the reason behind the error "Uncaught SyntaxError: Malformed arrow function parameter list" when using "true && () => {}"?

Creating a React functional component that updates state when a specific window breakpoint is reached

"Utilize parameter passing with mapGetters in the Vuex state management system

Creating a dropdown menu utilizing JavaScript/jQuery arrays

Turn off the scrollbar without losing the ability to scroll

Generate an asynchronous boolean promise when calling the isPresent function in Protractor