Destroy Three.js Renderer

Is there an effective method to properly destroy a three js instance?
I am encountering an issue where removing the canvas and re-adding it results in two renderers being created.

Presently, my approach involves:

  1. Removing all event listeners
  2. Cancelling requestAnimationFrame
  3. Deleting the renderer instance from its parent element

Answer №1

How about trying something like this?

  stopAnimation(this.id);// Stop the animation
    this.renderer.domElement.removeEventListener('dblclick', null, false); //remove listener for rendering
    this.scene = null;
    this.projector = null;
    this.camera = null;
    this.controls = null;
    clearContainer(this.modelContainer);

function clearContainer(elem) {
    while (elem.lastChild) elem.removeChild(elem.lastChild);
}

This was inspired by an old post on Stack Overflow: How can I destroy THREEJS Scene?

Answer №2

If you want to completely get rid of the scene, you can do so by following these steps:

scene = null;

To eliminate a specific mesh from the scene, use the command:

scene.remove( mesh );

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

The functionality of res.render for routing in Node.js with EJS seems to be dysfunctional, however, res.send appears

I'm currently in the process of setting up the environment for a node js app, but I've encountered an issue with rendering the views/ejs files. When using the following code: app.get("/", function(req, res){ res.send('Something'); }) ...

What is the purpose of using the variable "header_row || 1" in App Script?

Recently, I stumbled upon a spreadsheet that contains app script for gathering keys of data requested through doGet. In the code, there is a line that reads like this: var headRow = e.parameter.header_row || 1; What exactly does this line mean? I searc ...

Creating a custom class implementation in JavaScript and initializing it with a constructor function

Perhaps there is a similar question out there, but I haven't come across it yet and I'm still facing an issue. Here's what I've tried: function createClass(obj) { const constructor = obj.constructor; constructor.prototype = obj; ...

Executing a function on a dynamically generated JavaScript button

Is there a way to create a button that triggers an onClick event calling a function with the signature deleteEntry(entry)? I'm encountering an error stating that entry is undefined even though I have used it in the same function. Adding escape charact ...

Tips for transferring data from a module.export function to an object

I am working on a Node/Express app and facing an issue with passing data from a JavaScript function to a Jade template. The JavaScript function in question is as follows: module.exports = { getFeatures: function() { var request = require("request") ...

What is the best way to customize multiple checkboxes in React Native?

I need help with implementing checkboxes in my app using react-native-check-box. I have tried creating 4 checkboxes, but the text inside them is not aligning properly. The boxes are rendering one above the other instead of staying on the same line. I want ...

Ways to incorporate vector .svg images into a D3js tree diagram

var treeData = [ { "name": "Top Level", "parent": "null", "remark":"yes", "children": [ { "name": "Level 2: A", "parent": "Top Level", "remark":"yes", "children": [ { "name": "So ...

React Bootstrap always displays tooltips

I have integrated react-bootstrap into my project. I am currently attempting to keep a tooltip always displayed, but I am facing some challenges in achieving this. Below are the approaches I have tried so far: <Card style={{width: '10rem'}} ...

The color of a PNG image remains consistent in Fabric.js

Below is the code I am using to dynamically change the color of a PNG image on canvas: var selectedObject = canvas.getActiveObject(); if ("text" == selectedObject.type) { selectedObject.setFill("#FF0000"); canvas.renderAll(); } else { selecte ...

Creating a visual representation from an array of strings to produce a

My goal is to organize a list of server names into a map using a specific logic. For instance, with names like: "temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2" They would be mapped as: { a: [ "temp-a-name1", "temp-a-name2" ] ...

React has been reported to display a Minified React error even in its development mode

Currently, I am utilizing browserify and babel for transpiling and bundling my script. However, a challenge arises when React 16 is incorporated as it presents the following error message: Uncaught Error: Minified React error #200; for more details, kin ...

What could be the reason behind the malfunction of query manipulation?

I created a handler factory function for managing an API, which includes a populate method to fill in a field in the database. However, I encountered an issue where my populate method was not working when using query manipulation. let query = await ...

Removing the hash symbol in Angular: A step-by-step guide

My experience with AngularJS is new, and I am currently working on removing the # from the URLs without utilizing NODE or Express. The project is being hosted locally on MAMP, with index.html acting as the main entry point. Within the structure, there are ...

Exclude the UL hierarchy from removing a class in jQuery

Check out this fiddle to see the code snippet: http://jsfiddle.net/3mpire/yTzGA/1/ I am using jQuery and I need to figure out how to remove the "active" class from all LIs except for the one that is deepest within the hierarchy. <div class="navpole"&g ...

Generating random images using Javascript

I am facing some challenges while creating my first custom JavaScript function. My goal is to display three random thumbnails on my webpage by selecting images from a pool of options. However, I am encountering issues with duplicated images and handling s ...

Is there a way to create triangles on all four corners of an image using canvas in JavaScript?

In my code, I am currently working on drawing rectangles on the corners of an image using JavaScript. To achieve this, I first extract the image data from a canvas element. // Get image data let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height) ...

Populate Vue components dynamically without the need for additional frameworks like Nuxt in Vue3

My goal is to develop a checksheet application using Vue, where the tasks are specified in an excel file. ===== To start, task A needs to be completed. Followed by task B. and so on... ===== I am considering creating a CheckItem.vue component fo ...

Toggle textboxes using jQuery depending on the radio button choice

I'm trying to make specific textboxes appear when a particular radio button is clicked on my form, but I want them to remain hidden otherwise. Here's an example of what I've implemented: HTML: Radio buttons: <p>Show textboxes<inpu ...

Tips for transferring a Spring MVC controller variable to JavaScript

I am currently working on retrieving a variable for a JavaScript function from an object that is sent to the view by the controller. The object I am dealing with is called Bpmsn. https://i.sstatic.net/FxlAo.png Through the controller, I have injected th ...

Unexpected lighting outcomes affecting the appearance of a 3D model in Three.js

Currently, I am immersed in creating a captivating 3D scene with Three.js, incorporating a 3D model through the libraries @react-three/fiber and @react-three/drei. The model itself renders flawlessly, however, I am faced with challenges in achieving the de ...