What is the process for storing a loaded model in three.js?

Working on a video game, I am encountering memory issues. Specifically, when loading 8 object models, I find that I am repeating them throughout the game map. This results in me having to load the same model multiple times in different locations on the map like this:

new THREE.MTLLoader().setPath( './Tree/' ).load( 'untitled.mtl', function ( materials ) {
     materials.preload();
     new THREE.OBJLoader().setMaterials( materials ).setPath( './Tree/' ).load( 'tree.obj', function ( object ) {
        object.scale.set(2, 2, 2);
        object.position.set(10, 0, 30);
        scene.add( object );
     }, undefined, undefined );
});


By doing it this way, I realize that I am creating multiple instances of the same object in memory, leading to excessive memory usage. Is there a method to save only one instance in memory and call upon it whenever needed?

I tried looking for solutions online but could not find or understand any suitable fix.

Answer №1

Instead of repeatedly loading the same object, consider using Object3D.clone() to create a copy. However, keep in mind that having multiple objects in memory and drawing each one separately may not be efficient for your particular scenario.

To optimize the rendering process for objects like trees, you can use instanced rendering or merge them into a single entity. This way, you'll only have one object in memory and draw all trees with a single draw call, improving performance. Take a look at the official examples to see how to implement these techniques:

(objects are merged using BufferGeometryUtils.mergeBufferGeometries)

three.js R105

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS implementation that disables a button when the input field is empty

As I delve into learning angular JS, I am facing a challenge. I want to disable the button using the "ng-disabled" attribute while my input fields for "login" and "password" are empty. However, the default text in the login input is "LOGIN" and in the pass ...

Steer clear of nesting subscribe functions when a forkjoin is present within

Below is my angular code: this.service.save(body).pipe( switchMap(resp => { return this.dialog.confirmation({ message: 'save object successfully!' }); }), filter(ok => ok), tap(() => { this.pro.status = re ...

In JavaScript, implement event listeners exclusively on the main container and its immediate child elements

Is there a way to target just the main container and its second child elements for an event? Specifically, targeting id="container" and all elements with class="secondChild" Currently, I have a listener attached to all elements inside ...

How can I dynamically update HTML content in React upon receiving an AJAX response?

Hi there, I'm new to using React and I have a requirement where I need to make an AJAX GET request to the server when a user clicks on a button. Based on the received response, I need to prepare HTML and display it. I tried implementing this with the ...

How can I combine multiple textures from mtlLoader and objLoader in three.js?

I have the files .mtl, .obj, and several .jpg textures. I have been attempting to use different textures in the export loader OBJ, and while I can see my object on the scene, it appears as a black color. Can anyone spot what might be incorrect or missing ...

Hover over the sprites using the "spritely" plugin to see the magic unfold

I'm looking to initiate an animation when the mouse hovers over a sprite and have it stop when the mouse moves away. After exploring various solutions, I found one that seemed promising: Why does jQuery spritely animation play an extra frame on secon ...

How can I ensure the button remains disabled until all inputs are completed in Redux form?

I am currently studying a react-redux form example that you can find at the following link: In this example, the submit button is enabled if the user fills in at least one input field. I am curious to know if there is a way to enable the button only when ...

Tips for sending PHP variables together with a Typeahead variable

I have simplified this code as much as possible. I have a typeahead variable that is functioning correctly. However, I also need to pass two unrelated variables $php_var1 and $php_var2 along with the typeahead variable. These PHP variables are initialized ...

What is the best way to have a sound play when the page is loaded?

Is there a way to automatically play a sound when the page loads? <audio src="song.mp3"> Your browser does not support the audio element. </audio> I've attempted it with the following method: <script type="text/javasc ...

I am having an issue with an input field not reflecting the data from the Redux state in my React app,

I am currently working on a todo list project using the MERN stack with Redux for state management. One issue I am facing is that the checkboxes for completed tasks are not reflecting the correct state from Redux when the page loads. Even though some tasks ...

Looking to personalize your jVectorMap region popups? Here's how!

Currently, I am working with the jVectorMap library. While hovering over each country, the default label displays the country name. However, I would like to customize the map so that it shows regions based on database values. How can I achieve this custo ...

Using the .each() method in jQuery to dynamically assign an attribute to a parent element in JavaScript

I'm new to JavaScript and jQuery and I need help transitioning my code from jQuery to pure JS. Within my HTML, there are multiple parent divs each containing a child div. My goal is to assign a class to both the child and parent elements, with the p ...

What methods can be used to search within one array in order to filter another array contained in a list?

Looking for suggestions on creating a filter in one list based on another list How can I handle filtering an array within a list by searching in another array? For example... myArray = [ { "name": "Item-A", "tags": ["Facebook" ...

Can someone explain the significance of '{}' within the function shown below?

I've been able to grasp most of this code, but I'm unsure about "{}". Can anyone clarify its meaning? var Toggle = function(section, expand) { this.section = section || {}; this.expand = expand | ...

"Enhance the functionality of material-table by incorporating a multi-select feature

My data management has been made easier with Material-Table, but I have encountered a small issue. The code below shows how I currently get a select menu for my data. However, I am looking to have a multiselect menu instead, allowing me to save more than o ...

Tips on displaying a selected choice | Utilizing Material UI Autocomplete

I have successfully fetched data from an API and used it as options in Material UI Autocomplete. However, when I select an option and send it back to the API using a POST request, the selected category is displayed as a number (0) instead of text, as shown ...

Unable to pass data to the onChange event for the material-ui datePicker components

Need help with a form that includes a material-ui DatePicker. Here is an example: <DatePicker name="startDate" autoOk={true} floatingLabelText="startDate" onChange={(x, event) => {console.log(arguments);}} /> When I change the date, the console ...

Is it possible to refresh HTML content using jQuery?

Currently, I am attempting to iterate through response data and integrate the values into the HTML of my webpage. It's crucial for me to clear any existing values in the HTML so that only the new ones are displayed, keeping it up-to-date. The structu ...

What is the best way to convert the javascript code into clojurescript?

Looking to utilize capacitor/app in order to determine the state (background or active) of my iOS app. My project is built on Clojurescript, so I need to convert the following javascript code into a clojurescript equivalent. Javascript import { App } fro ...

How do you send a variable in a GET request with React?

My challenge is to retrieve data from a table where the teacherId matches the teacherId of the user who logs in, but I am facing difficulties in passing this teacherId from the front-end to the back-end. Below is the backend code: app.get("/api/get&q ...