When attempting to remove an object from the scene, an error occurs stating that children[i]

Question

When attempting to remove an object from the scene, an error occurs stating that children[i]

Is there a way to remove an object from the scene?

removeObjectFromScene = (position) => {
    this.scene.traverse((child) => {
        if (child.isGroup && child.userData.position) {
            if (child.userData.position.equals(position)) {
                console.log(child.name);
                this.scene.remove(child);
            }
        }
    });
}

Encountering an issue:

object_113

Uncaught TypeError: children[i] is undefined
    traverse three.module.js:7944

I would appreciate any suggestions on how to resolve this problem. Thank you.

javascript three.js typeerror traversal

Answer 1

Answer №1

Possible Issue
In a THREE.Group, it is possible to have THREE.Mesh/Three.Object3D as its children. Therefore, when you traverse and eventually remove this group, you are also inadvertently removing its children. As a result, the traversal may encounter an index that references a child that has already been removed.
https://i.sstatic.net/t4CiQ.jpg The following solution could potentially resolve this problem:

const removeLegoByPos = (pos) => {
    let LegoToBeRemoved = undefined

    this.scene.traverse((child) => {
        if (child.isGroup && child.userData.position) {
            if (child.userData.position.equals(pos)) {
                LegoToBeRemoved = child
                // If you find the group, consider researching if traverse can be stopped mid-process, as I am uncertain
            }
        }
    })

    if (legoToBeRemoved) {
        legoToBeRemoved.removeFromParent()
        return true
    }

    return false
}

Answer 2

Possible Issue
In a THREE.Group, it is possible to have THREE.Mesh/Three.Object3D as its children. Therefore, when you traverse and eventually remove this group, you are also inadvertently removing its children. As a result, the traversal may encounter an index that references a child that has already been removed.
https://i.sstatic.net/t4CiQ.jpg The following solution could potentially resolve this problem:

const removeLegoByPos = (pos) => {
    let LegoToBeRemoved = undefined

    this.scene.traverse((child) => {
        if (child.isGroup && child.userData.position) {
            if (child.userData.position.equals(pos)) {
                LegoToBeRemoved = child
                // If you find the group, consider researching if traverse can be stopped mid-process, as I am uncertain
            }
        }
    })

    if (legoToBeRemoved) {
        legoToBeRemoved.removeFromParent()
        return true
    }

    return false
}

When attempting to remove an object from the scene, an error occurs stating that children[i]

Answer №1

Similar questions

Is your Z-Index failing to make an impact?

Is there a way to avoid getting a 404 error in Express when using multiple static directories?

Enter information into the designated text field once you have selected the button

A user-friendly JavaScript framework focused on manipulating the DOM using a module approach and aiming to mirror the ease of use found in jQuery

Verify the presence of blank space with javaScript

Unable to get Discord.js sample code functioning correctly

How can I choose which button to click in selenium if there are multiple buttons on the page with the same name, value, and id?

Which is the more precise approach: res.render('test') or res.render('test.ejs')?

Disregard the sorting of rows in the MUI Datagrid

Enabling the use of jQuery with Angular instead of JQLite

As the background image shifts, it gradually grows in size

"Unveiling the power of canvas layers in creating dynamic

Looping through an array

Can the renderWith function of a column in angular-datatables retrieve a value from a promise?

Using ajax.actionlink to display the desired text

Having trouble loading the DOM element within the child component

Searching for data in Express JS with MongoDB using the $or operator is not possible

What is the best way to customize the appearance of an Angular tree component?

The first-person control feature in three.js has a glitch that causes objects to vanish from the

What is the correct way to encode this URL using JavaScript or jQuery?