Having difficulty deleting items with Three.JS

Question

Having difficulty deleting items with Three.JS

I'm currently using Three.JS to create a plane and add some boxes on top of it. I occasionally need to remove all the boxes. To achieve this, I have attempted using the code snippet below:

for (i = 0; i < scene.children.length; i++) {
    var object = scene.children[i];
    if (object != plane && object != camera) {
        scene.remove(object);
    }
}

/This code eliminates every object that is not the plane or the camera ;-)/

While it successfully removes some boxes, it fails to delete all of them =( Any suggestions on how to delete all boxes? Regards, José

javascript 3d three.js

Answer 1

Answer №1

It is important to remember to remove array objects from back to front rather than front to back.

var obj, i;
for ( i = scene.children.length - 1; i >= 0 ; i -- ) {
    obj = scene.children[ i ];
    if (obj !== plane && obj !== camera) {
        scene.remove(obj);
    }
}

The reason for this is because when you remove a node, the remaining nodes shift up in index numbers. For example, removing scene.children[0] will cause children[1] to become the new 0, and so on. By starting from the end of the array, you avoid skipping over any nodes during removal.

Additionally, this method may result in slightly faster performance, especially with larger arrays, as scene.children.length is only retrieved once at the beginning of the loop, rather than during each iteration.

Answer 2

It is important to remember to remove array objects from back to front rather than front to back.

var obj, i;
for ( i = scene.children.length - 1; i >= 0 ; i -- ) {
    obj = scene.children[ i ];
    if (obj !== plane && obj !== camera) {
        scene.remove(obj);
    }
}

The reason for this is because when you remove a node, the remaining nodes shift up in index numbers. For example, removing scene.children[0] will cause children[1] to become the new 0, and so on. By starting from the end of the array, you avoid skipping over any nodes during removal.

Additionally, this method may result in slightly faster performance, especially with larger arrays, as scene.children.length is only retrieved once at the beginning of the loop, rather than during each iteration.

Answer 3

Answer №2

@Crazycatz provided the correct answer, although it was given in 2016. Instead of manually iterating through the array, we can now simply use the .slice() method to create a copy of the array and iterate over it:

scene.children.slice().forEach(obj => scene.remove(obj))

If you prefer not to use ES6 features, you can achieve the same result like this:

scene.children.slice().forEach(function(obj) { scene.remove(obj); })

Answer 4

@Crazycatz provided the correct answer, although it was given in 2016. Instead of manually iterating through the array, we can now simply use the .slice() method to create a copy of the array and iterate over it:

scene.children.slice().forEach(obj => scene.remove(obj))

If you prefer not to use ES6 features, you can achieve the same result like this:

scene.children.slice().forEach(function(obj) { scene.remove(obj); })

Answer 5

Answer №3

Consider utilizing !== instead of != for improved efficiency. Have you attempted to iterate through your loop and inspect the scene's children afterwards? It's possible that you may have inadvertently added some boxes to the plane as child elements, which are not being removed by this loop.

Answer 6

Consider utilizing !== instead of != for improved efficiency. Have you attempted to iterate through your loop and inspect the scene's children afterwards? It's possible that you may have inadvertently added some boxes to the plane as child elements, which are not being removed by this loop.

Having difficulty deleting items with Three.JS

Answer №1

Answer №2

Answer №3

Similar questions

Convert Screen Coordinates to World Coordinates with ThreeJS

Generate an array using hyperlinks within a list item created by the user

Achieving left alignment for Material-UI Radio buttons: Float them left

Activate the drop-down division when the search box is in focus with xoxco technology

Include the particules.js library in an Angular 4 project

Finding tool for locating object names in JSON

Setting up Npm Sequelize Package Installation

Modify the location of the input using jQuery

The term 'Buffer' is not recognized in the context of react-native

What is the best way to ensure that two objects collide with one another?

What methods can I use to ensure that a user's credentials are not shown in the URL?

Issue with bidirectional binding on angular material slide toggle not functioning as anticipated (Angular 4)

React JS: How to prevent Yup and Formik error messages from being displayed multiple times upon submission

Receiving no communication from Express Router

When working with Three.js and Jest, a TypeError is thrown stating that 'getShaderPrecisionFormat' property cannot be read from undefined object

Building a dynamic map with React components using an array

When passing req.body to another file for processing, it is displaying as undefined in node.js

Issue with Jquery modal not functioning properly on second attempt

Node.js is raising an error because it cannot locate the specified module, even though the path

Typescript struggles to comprehend the nullish-coalescing operator