Free up Object Three.js

I've been working on a project that utilizes webGl and Three.js. The main issue I'm facing is related to memory deallocation.

As the game progresses, a large number of objects are created, leading to excessive memory allocation. Despite trying various approaches in my code, nothing seems to be effective.

Currently, I am using the following function:

function deallocatingScene(){
    for (var i = scene.children.length - 1; i >= 0 ; i--) {
       deallocateObject(scene.children[i]);
    }
}

function deallocateObject(obj){
scene.remove(obj);
if (obj.geometry) {
    obj.geometry.dispose();
}
if (obj.dispose) {
    obj.dispose();
}   

}   

Any suggestions on how to improve this implementation?

Answer №1

When you no longer need objects in your browser, the browser will automatically clean them up for you by performing garbage collection. This process helps free up memory and improve overall performance.

To monitor when this cleanup occurs, you can use the Timeline tab in Chrome. After deleting a large object, keep an eye out for a "Garbage Collection" event which indicates that the browser has cleared unnecessary items.

While you cannot directly force the browser to release specific memory, relying on the garbage collector is usually sufficient as it operates efficiently in modern browsers. It's more important to manage the number of objects you create, especially in 3D applications where excessive allocations can impact rendering performance.

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

Combining values and eliminating duplicates from an external API: A step-by-step guide

My API provides soccer game results in this format: results:[ { Group:"A" Home: "Fc Barcelona", Away: "Fc Porto" Score: { Home: 0, Away: 0 }, { Group:"A" Home: "AC Milan", Away: "Fc Barcelona" Score: { Home: 0, Away: 1 }, { Group:"A" Home: "FC Barcelona" ...

Tips for achieving a gradual transformation of an element according to the scrolling position

I have been experimenting with using waypoints for two specific purposes. The first objective is to determine whether a user is scrolling up or down and if the container comes into view. However, this functionality is not working as expected. The sec ...

If I click on the datalist link option during an ajax append, I would like to be redirected

When I try to link after clicking an option in the appended AJAX, it does not seem to work as expected: More details: $('#input-friends').on('input', function () { var id = $('#input-friends').val(); $.ajax({ ...

The entire component is not displayed in Vue

Just starting out with Vue. I'm looking to create a component that encompasses the entire page except for the header and footer Vue.component('main-block', {template: ` <section id="first-block">...</section> <secti ...

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

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

I've been working on a simple AngularJS application that includes a form with two fields. However, I've run into an issue where I'm unable to read the values entered in these fields from my controller, as I keep getting 'undefined' ...

Upon clicking the <p:submenu> element, directly navigate to the first <p:menuitem> element

I am working with a dynamic <p:menubar> as shown below: <p:menubar style="position: relative; height: 30px; visibility: visible;"> <p:submenu label="Category" icon="ui-icon-document" styleClass="mainMenu"> <c:forEach var=" ...

Converting multiple tiff image files into a single image in Angular 9: A step-by-step guide

I am currently developing a web application using Angular 9. I am looking to incorporate a feature that will enable the conversion of multiple Tiff images into a single PDF or window.URL.createObjectURL(blob) of pdf. let images = ["http://netghost.nar ...

The best practices for managing item spacing in React or React Native

I am facing some challenges while trying to adjust the spacing of my components. My goal is to have the grid occupy 90% of the screen, with the gear icon taking up the remaining 10% <View style={{ paddingLeft: insets.left, padding ...

Navigating through content using jQuery scroll bar

Could someone please assist me with scrolling the content on my website? For example, I have a link like this: <a href="#">content3</a> When a user clicks that link, I would like the content to scroll to div content3. I am looking for guidan ...

`Can you explain how to specify the elements of an array within a form using AngularJS?`

Below is an array containing objects: //Data source code $scope.data = [ { name: 'Lname', items: [{ label: 'Lastname', type: 'text', model: 'lname', pattern: '/^[a-zA-Z]$/', ...

Utilizing R3F OrbitControls to maintain a constant camera perspective

Currently I am working on a project involving a 360 image, and it is crucial for the camera to remain fixed at the coordinates (0,0,0). However, whenever I try to update the camera position, the controls stop functioning properly. While researching this ...

Three.js OBJLoader is experiencing a material deficiency

While using the objloader in three.js, I encountered an issue where the .obj file I was working with did not load the material properly. Despite everything loading fine in three.js as shown in the console, the problem persisted. The three obj files - model ...

What could be the reason behind ejs not allowing if else statements when the variable is undefined?

I am attempting to replicate a rather simple example from this question here <div <% if (page_name === 'overview') { %> class="menu__menu-overviewPage menu" <% } %> class="menu"> However, when I try it on a ...

When "this" doesn't refer to the current object, how to self reference an object

I am currently working on developing a modular series of element handlers for an application that features pages with different configurations. For example, the 'Hex T' configuration includes elements labeled from 'A' to 'O', ...

Changing the size of text in jquery for selected text can be done using the resize

Is there a way to change the font size of text within a specific div when it is selected by the user? I have the JavaScript code, but I need to resize the font size of the focused or currently selected div only. $("#slider").on("change",function(){ ...

HTML - Using Tables to Add and Edit Rows

Take a look at this demo on JSFiddle for my project: Demo jsfiddle I'm currently in the process of creating a table with various functionalities. The function "sortTable" is responsible for sorting the table and it's functioning as expected. T ...

It is impossible for two long-lasting PHP scripts to run concurrently on a server

I have a PHP script that runs for an extended period of time on the server. This script streams video content to the video tag, for reasons unknown (don't judge me :-) ). The script can run for tens of minutes. The issue arises when I attempt to make ...

How can I connect HTML and JavaScript to get the clicker functioning?

While the HTML and javascript work flawlessly on jsfiddle where I initially created this project, I'm encountering a problem with Google Drive's hosting. The HTML displays correctly but there is no interaction happening with the javascript. Belo ...

Utilizing Vanilla JavaScript to Insert a Class When a Distinct Class Exists Within an Element

My goal is to dynamically add a class to specific elements based on the presence of another class in elements below them. Consider the following code snippet: < p class="my-paragraph">This is a sentence.</p> < p class="my-par ...