I'm trying to delete temporary THREE.JS 3Dobjects in forEach loop. My code is doing the job but I've got "Object3D.removeFromParent is not a function" error in console while I'm doing that.

I'm working on app that shows two views at once in different mode so this.scenes = [scene1, scene2] and I'm using Potree to generate pointclouds that's why my scene have it's own scene inside.

That's the code:

    clearTemp() {
      this.scenes.forEach((scene) => {
        scene.scene.children.forEach((child) => {
          if (child.name.includes("temp")) {
            this.#removeObject3D(child)
          }
        })
      })
    }

    #removeObject3D(obj) {
      if (!(obj instanceof THREE.Object3D)) return false;

      if (obj.geometry) obj.geometry.dispose();
  
      if (obj.material) {
          if (obj.material instanceof Array) {
              obj.material.forEach(material => material.dispose());
          } else {
              obj.material.dispose();
          }
      }
      obj.removeFromParent();
      return true;
    }

I've tried to use Object3D.remove() function like so:

clearTemp() {
      this.scenes.forEach((scene) => {
        scene.scene.children.forEach((child) => {
          if (child.name.includes("temp")) {
            scene.scene.remove(child)
          }
        })
      })
    }

While doing this that way, there are no errors but it doesn't remove temp objects as expected.

How to do it properly, remove all temp objects and get rid of that error message?

0

There are 0 best solutions below