Using Three JS to recycle the geometry of a previously imported object

Question

Using Three JS to recycle the geometry of a previously imported object

Is there a way to efficiently re-use imported object geometries in Three JS without duplicating them in memory? I've tried writing a loader but it doesn't seem to update the geometry once loaded.

var tmpGeo = geometries[ID];
if (!tmpGeo) {
    tmpGeo = new THREE.BufferGeometry();
    geometries[ID] = tmpGeo;
    objLoader.load("/models/" + ID + ".obj", function (mesh) {
        tmpGeo = mesh.children[0].geometry;
    });
}
obj.add(new THREE.Mesh(tmpGeo, tmpMat));

I want to be able to import an object only once and then re-use its geometry across multiple objects. Any suggestions on how to achieve this?

javascript three.js

Answer 1

Answer №1

It's important to keep in mind that the model is loaded asynchronously, so when you're generating the mesh without waiting for the model to finish loading, you are essentially updating the empty BufferGeometry with new data. To avoid this issue, consider implementing the following solution:

var geometry = geometries[ID];
if (!geometry) {
  geometry = new THREE.BufferGeometry();
  geometries[ID] = geometry;
  objLoader.load("/models/" + ID + ".obj", function (mesh) {
      // Update the existing BufferGeometry using loaded data.
      geometry.copy( mesh.children[0].geometry );
  });
}
obj.add(new THREE.Mesh(geometry, material));

Alternatively, you can postpone creating the mesh until the geometry has finished loading.

Answer 2

It's important to keep in mind that the model is loaded asynchronously, so when you're generating the mesh without waiting for the model to finish loading, you are essentially updating the empty BufferGeometry with new data. To avoid this issue, consider implementing the following solution:

var geometry = geometries[ID];
if (!geometry) {
  geometry = new THREE.BufferGeometry();
  geometries[ID] = geometry;
  objLoader.load("/models/" + ID + ".obj", function (mesh) {
      // Update the existing BufferGeometry using loaded data.
      geometry.copy( mesh.children[0].geometry );
  });
}
obj.add(new THREE.Mesh(geometry, material));

Alternatively, you can postpone creating the mesh until the geometry has finished loading.

Using Three JS to recycle the geometry of a previously imported object

Answer №1

Similar questions

The AdminLTE Bootstrap Table Search Bar vanishes when extra <th> tags are added

Display <tr> tag when button is clicked without refreshing the page

Creating a tooltip using JQuery for a text input field - a complete guide

What is the best way to manage the "checked" state of an input checkbox using React?

There was an issue with the RouteHandler function at line 21 in the ./.cache/root.js

Assistance required for activating an unidentified function or plugin within a Chrome extension

Utilizing the array result obtained from the fetch function

Interacting with MongoDB in a React application using Redux and Redux Thunk

Associative TypeScript Arrays

Utilizing Mantine dropzone in conjunction with React Hook Form within a Javascript environment

Guide on integrating an HTML and CSS register form in Django

Unable to retrieve the regex value with an alternate label

What could be the reason for the lack of error handling in the asynchronous function?

What is the best way to connect the imagemap shape with the checkbox?

I am facing an issue with properly linking my jQuery

JavaScript/Typescript is throwing an error because it is unable to access the property 'username' of an undefined object

PHP form functioning correctly on one domain but not on the other

Performing an AJAX request to a form within a CSS modal

Retrieve the div element from the webpage

Using Javascript to dynamically enable or disable an input field depending on the choice made in another field