Three.js experiences a memory leak issue

We are currently working on a single page app where users can switch between multiple Three.js apps. However, we have observed a continuous increase in memory usage by the tab. There is no memory leakage in our app and it appears that Three.js variables are not being cleared from RAM.

Steps to Reproduce:

  1. Visit and open the Task Manager in Google Chrome to monitor the memory usage of the tab.
  2. Switch between examples and you will notice a gradual increase in memory usage. It seems like garbage collection never occurs or is unable to release previously allocated memory blocks.
  3. On my laptop with the following configuration: , memory usage easily surpasses 1GB when everything starts to freeze.

I have come across 2 bug reports filed on Chromium and Firefox regarding this memory issue, but no solution has been provided yet.

Please assist me in releasing memory as most of the solutions found online have not been helpful.

PS: I have also reported a bug on Three.js GitHub repository here: https://github.com/mrdoob/three.js/issues/4276

javascriptmemory-managementmemory-leaksthree.js

Answer №1

Here is the method that worked for me:

  1. Start by creating an array to store all items added to the scene.
  2. Whenever you add a new item to the scene, remember to also add it to this array.
  3. When it's time to destroy an item, use scene.remove('item name') to remove it from the scene.
  4. Finally, go through the array and manually set each item to undefined.

This approach helped me reclaim over 600MB of memory after navigating to a different page.

Update: This tip was shared by Mr. Doob and WestLangley in response to a question about memory leaks with three.js and numerous shapes. More details can be found here.

If you're using webGLRenderer, remember that after removing a mesh with scene.remove(mesh), you should deallocate the memory by using renderer.deallocateObject(mesh). Textures can also be deallocated using 

renderer.deallocateTexture(texture)
.

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

What is the best way to retrieve and display a PDF file through an API in VueJS?

I am looking to display a file from my API in my VueJS client. Specifically, when accessing a certain URL, the file (pdf, text, or image) should open if the browser supports it (similar to how Chrome opens PDFs). I want to achieve this using VueJS or just ...

javascriptexpressvue.js

Planes in Three.js that are overflowing may have their opacity adjusted

My current challenge involves aligning two planes in the same (or closest possible) position. When two planes made of different materials and colors occupy the same space, depending on the camera angle and view perspective, the front plane's opacity ...

javascript3dthree.jswebglmesh

Having trouble with the jQuery load function not functioning properly

I have encountered an issue with this code snippet while running it on XAMPP. The alert function is working fine, but the HTML content fails to load. I have included links to jQuery 3.2.1 for reference. index.html $(document).ready(function(){ $("#b ...

javascriptjqueryhtml

Guide to integrating Google Maps JS API into a React application without relying on third-party libraries

I'm currently grappling with the concept of integrating external APIs in React and am interested in using Google Maps' API to showcase a map within a child component. My goal is to gain insight into how this can be done without relying on any ext ...

javascriptajaxgoogle-mapsreactjsgoogle-maps-api-3

Steps for incorporating 'admin-ajax.php' on the frontend

Here is the code for Javascript. Javascript used: new AjaxUpload('#upload_btn', { action: '<?php echo admin_url("admin-ajax.php"); ?>', This function only functions when the user is logged in. ...

javascriptjquerywordpress

Retrieve the red, green, and blue components of a color in the RGB format

When I retrieve "rgb(18, 115, 224)" from a DOM element, I need to convert this color to hexadecimal in order to assign it to a span element. To get the hexadecimal equivalent of the color, I can use the following code snippet: "#" + componentToHex(r) + co ...

javascriptjqueryhtmlcsscolors

The issue arises when DataTable fails to retrieve the ID element following a page transition

I am facing an issue with making ajax calls on focus for each text input. I am able to do it on the first page, during document ready event. However, when I navigate to another page, JavaScript is unable to parse the inputs as they were not created during ...

javascriptjquerydatatables

Is it considered poor form to send as many as 100 ajax requests when loading a webpage?

My table can display up to 100 rows, sometimes even more. Is it considered a bad practice to loop through all these rows and send an AJAX post request to fetch data? I am hesitant to do this during the page load as it may significantly slow down the loadin ...

javascriptjqueryajax

A simple guide on how to display a child object in a materialUI select dropdown from a parent object

I am developing a ReactJS application where I aim to showcase child objects from the parent object in a dropdown using materialUI select. Despite attempting to iterate over the object using the map() function, I haven't been able to retrieve values up ...

javascriptreactjsmaterial-ui

Unexpected behavior observed in ng-select when pasting search values

When attempting to update an array of strings acting as the model for an ng-select, the values do not appear correctly in the search box. https://i.sstatic.net/WqdJ6.png The values that are displaying correctly are the ones selected from the dropdown men ...

javascriptarraysangulartypescriptangular-ngselect

Why does the del command delete the parent folder as well?

I am looking to remove all files within the ./dist/* directory while leaving the ./dist folder itself untouched (it should be empty once the task completes). const del = require('del'); gulp.task('clean:dist', function(cb){ del([ ...

javascriptnode.jsnpmgulp

When looking at react/17.0.1/umd/react.development.js, it becomes evident that ReactDOM is not defined

I'm currently immersing myself in learning React with the help of React Quickly, written by Azat Mardan, which is based on React v15.5.4. The examples provided in the book typically include two essential files: react.js and react-dom.js, such as in th ...

javascriptreactjsreact-dom

Centered on the screen are the input field and corresponding label

I am in the process of creating a signup form, and I have encountered an issue. How can I make the input wider without using a fixed width like width: 420px? Additionally, I would like to center both the input field and the label. I envision something simi ...

javascripthtmlcssreactjsforms

Adjust the href link value when a new option is selected

I currently have a select element displayed below. Next to it, there is a link that sets the eID value to a session value. However, I want this value to be updated dynamically whenever a different eID value is selected from the dropdown. Although I can r ...

javascriptphp

Is there a way to programmatically click on an href link in Firefox? The method that is typically used in Internet Explorer

http://jsfiddle.net/HVGre/1/ - check out this test link. I have a link in my HTML code that needs to be clickable dynamically. While it functions well with the .click() method in Internet Explorer, it fails in Firefox. Unfortunately, changing the link to ...

javascriptjqueryhtmlfirefox

Maximizing the potential of Angular forms through native FormData

Currently, I am revisiting an older project that still uses traditional methods for form submission. The HTML includes a form element with defined method and action. My goal is to submit the form in the old-fashioned way using the action attribute to post ...

javascripthtmlangularforms

Toggle the opening and closing of React components with a map function using onclick

Implementing an onClick function within a map operation, I am encountering an issue where clicking the onClick button changes the state of all items in the map, instead of just the item clicked. This is being done using the useState hook. const [open, se ...

javascriptreactjsmap-function

Facing a dilemma: Javascript not updating HTML image source

I am facing an issue while attempting to modify the source of my HTML image element. Despite using document.getElementId('image') in my code, I am unable to make it work as intended. Surprisingly, there are no errors displayed. Interestingly, whe ...

javascripthtmlimage

Loop through and display content on the webpage with a for loop

I'm attempting to create a loop that will display information in three different areas of the DOM. Essentially, I have an array of enemies and I want to randomly select three of them to display in separate HTML div classes (firstEnemy, secondEnemy, th ...

javascriptarraysdom

Exploring the Positives and Negatives of Using JQuery and Glow JavaScript Libraries

Is there a detailed analysis available that compares JQuery with the BBC's Glow JavaScript libraries? ...

javascriptjquerybbc-glow