incorporating the same model into the scene multiple times

Question

incorporating the same model into the scene multiple times

Currently, I am loading a single model multiple times using the following code:

var loader = new THREE.JSONLoader();
loader.load(model, load_func);

The function load_func is responsible for creating a mesh and adding it to the scene:

var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
scene.add( mesh );

I am starting to question whether this is the best approach for loading the model multiple times into the scene. Would it be more efficient to create the mesh only once and then add it to the scene at different locations?

Additionally, I am concerned about the impact on network traffic. If the model is hosted on a server, does the loader.load method download the model multiple times?

javascript three.js

Answer 1

Answer №1

Nope, that approach won't work. You need to try a different method, like the one below:

let loader = new THREE.JSONLoader();
loader.load(model, load_func);
function load_func(){
  let mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
  for(let i = 0; i < 100; i++){
    let mesh_new = mesh.clone();
    // Update position
    scene.add( mesh_new );
  }
}

Answer 2

Nope, that approach won't work. You need to try a different method, like the one below:

let loader = new THREE.JSONLoader();
loader.load(model, load_func);
function load_func(){
  let mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
  for(let i = 0; i < 100; i++){
    let mesh_new = mesh.clone();
    // Update position
    scene.add( mesh_new );
  }
}

incorporating the same model into the scene multiple times

Answer №1

Similar questions

Webpack and Keycloak Integration: Content blocked because of MIME type ("text/html")

Utilizing AngularJS to make an API call with $http method and handling a

What is the correct way to utilize "data:" in a jQuery AJAX call?

Stop unauthorized direct access to PHP forms and only allow submission through AJAX requests

Node.js captures the Promise and provides detailed feedback

Angular does not recognize the function element.sortable

Exploring the world of Restify: Mastering the art of sending POST

Send the form to the webpage and display various div elements based on the entered information

Tips for implementing multiple middlewares in Next.js using the middleware.ts script

Setting up the karma ng-html2js preprocessor to locate my templates within a specific folder

When activated, JavaScript is producing an undefined response

Encountering an issue with react-dom that needs to be resolved

Vue table displaying a list of books with a button that allows users to easily send the title of the

Data binding in AngularJS allows for easy synchronization between the model and the view

Avoid deleting a row in Sequelize if it is referenced in another association

Leveraging React SSR with Next.js, we can utilize the `getInitialProps` method to insert a

ngx-slick-carousel: a carousel that loops infinitely and adjusts responsively

Using async/await with Fetch to send POST parameters for text/html content

Challenges arising from MeshFaceMaterial post revision 54 (Update 2)

Creating multiple asynchronous calls within a loop in JavaScript