Issue with three.js memory leak due to malfunctioning .dispose() method or incorrect usage

Greetings!

I'm currently facing a memory handling issue. Despite researching various forums, I am still unable to identify the problem in my code.

My project involves combining d3.js with three.js to create a visualization of nodes resembling planets orbiting in space. The data is extensive, with over 8,000 planets distributed across 8+ orbits. However, every time I attempt to load new data, I encounter difficulties in destroying the existing tree without causing memory leaks.

I would greatly appreciate any assistance! Below is a snippet of the code where I generate planets and attempt to destroy them:

function initTree(root) {
    // Code for initializing tree and creating planets
}

After adding spheres to the parent Object3D and then to the scene, I have implemented a function to destroy these elements:

function destroyTree() {
    // Code for destroying spheres, objects, and other elements
}

Answer №1

Have you considered that by traversing the scene, you may also find the spheres? In that loop, you could dispose of them directly without the need for the to_delete array. If the spheres are not all children of the scene, maybe it's worth rethinking when they should be created? These optimizations might provide some clarity on where the leak is occurring.

Alternatively, have you tried maintaining an array of textures and releasing them directly?

Oh wait, I found a link suggesting that objects and textures should be removed from the renderer as well.

Memory leak in Three.js

renderer.deallocateObject renderer.deallocateTexture

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

Even though I have successfully compiled on Heroku, I am still encountering the dreaded Application Error

Looking for help with a simple express/node application to test Heroku? Check out my app.js: const express = require('express') const app = express() const port = '8080' || process.env.PORT; app.get('/', function (req, res) ...

A superior method for implementing CSS keyframe transitions

Currently, I am utilizing the Rico St.Cruz brilliant query.transit library for my work. However, I need to make some changes involving classes instead of CSS transitions. Although I am not very confident in CSS transitions, I attempted to replace: JS: $ ...

Unpacking the information in React

My goal is to destructure coinsData so I can access the id globally and iterate through the data elsewhere. However, I am facing an issue with TypeScript on exporting CoinProvider: Type '({ children }: { children?: ReactNode; }) => void' is no ...

Show the nested div when hovering over the containing div using JavaScript

I have a situation where I have multiple divs within a parent div, all using the same class. Here is an example: <div class="deck-content"> <div class="deck-box">TEST< <div class="deck-hidden">< <span class= ...

gulp-uglify is responsible for the malfunction of the constructor.name property

When I make a change in my gulpfile.js by commenting out the line .pipe(uglify({ preserveComments: 'some'})) my code appears neat and tidy, and the next line functions correctly: if(Mystudy.constructor.name != "MyStudyView") However, ...

Soft keyboard on mobile fails to update when arrows are used in Ajax-populated dropdown menus

I am working on a web form that includes two select fields: Country and City: <select id="country" onchange="getCity(this);"> <option value="">-- Please select your country --</option> <option value="1">Austria& ...

Images are failing to render on Next.js

Hello there! I am facing an issue while working on my Next.js + TypeScript application. I need to ensure that all the images in the array passed through props are displayed. My initial approach was to pass the path and retrieve the image directly from the ...

Quickly view products in Opencart will automatically close after adding them to the cart and redirecting the

I've integrated the product quickview feature into my OpenCart theme, which opens a product in a popup. However, when I add a product to the cart from the popup, it doesn't update on the main page until I refresh. I'm looking for a way to re ...

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

I recently started learning JS, Jquery, and CSS. My goal is to create a Simon Says style game. However, when I attempt to animate the computer to automatically light up the correct square, I faced some challenges. To address this issue, I decided to star ...

Using CSS to position an element relative/absolute within text inline

Need help aligning caret icons next to dynamically populated text in a navbar menu with dropdown tabs at any viewport size. Referring to positioning similar to the green carets shown here: https://i.stack.imgur.com/4XM7x.png Check out the code snippet bel ...

Error: The value property is undefined and cannot be read at the HTMLButtonElement

I'm currently working on a project where I need to display a dropdown menu of buttons using Pug in order to render an HTML page. To achieve this, I am using the getElementsByClassName('dropdown-item') method to retrieve all the buttons in an ...

Is there a way to dynamically adjust height from 0 to 'auto' using @react-spring useTransition?

When utilizing the useTransition hook to incorporate animation into a list element, I encountered an issue where the height of its child elements is not fixed. If I specify {from:{height:0},enter:{height:'auto'}, the animation effect is lost. Is ...

Encountering a blank page issue with react-router-dom v6 Routes

I am attempting to route a page to the root, but it keeps showing up as a blank page regardless of which JavaScript file I use. It seems like React Router DOM has been updated and no longer uses Switch. I haven't used React since last year, so I' ...

The Ajax request is not successfully communicating with the PHP script

I am struggling with an issue regarding ajax calling a PHP code without changing the current page. Despite checking the php_error.log, I cannot find any reference to the PHP file. There are no errors displayed on screen, leaving me clueless about how to re ...

JSON error: Encountered an unexpected token "o" while processing

My database table: TABLE `events` ( `event_id` INT(11) unsigned NOT NULL AUTO_INCREMENT, `event_title` VARCHAR(255) NOT NULL, `event_desc` TEXT, `event_location` VARCHAR(255) NOT NULL, `event_requirements` TEXT DEFAULT NULL, `event ...

When the route is changed, the system must execute a function to verify the authenticity of the token

When routing changes in Angular, I have a requirement to execute a function based on whether a valid token is set or not. Is there anyone who can assist me in achieving this task? In Angular 1, I used to accomplish this using $on. ...

Ways to invoke a JavaScript function using a JSON string

Suppose I make an AJAX post request using jQuery with the following structure: $.post('MyApp/GetPostResult.json', function(data) { // what should be implemented here? }); When the result is as follows: { "HasCallback": true, "Cal ...

What is preventing this setTimeout from triggering?

My experience with Knockout js has left me puzzled, as I seem to be missing a key concept. Despite no error messages, it's challenging for me to pinpoint where exactly the issue lies. All I want is to periodically fetch data and update my table using ...

"Unleashing the Power of MongoDB's Dynamic $in

Is there a way to dynamically pass a list of strings to a $in clause in MongoDB? I attempted the following code, but it didn't work and I haven't been able to locate more information other than an example with hardcoded values. The restrictedUs ...

How can I use React to switch the visibility of a nested component from the parent container component?

Objective I am in the process of replicating a List Control Component using React and Redux, following the guidelines outlined in Google Material Design layout. This list control will enable users to create, rename, and delete items within the list witho ...