01/08/2023

Threejs : add to scene and remove from scene, with names

Ouch :) This article was published 1 year ago - might be out of date, check out stuff or leave comment

here is a quick helper for dealing with small three js animations in a rather simple technique : add objects by naming them, and bulk removing them by name. This is an extension for the threejs Scene object, I call it WaveScene

import * as Three from 'three';
export default class WaveScene extends Three.Scene
{
    waveRemoveMeshes(MeshTitle)
    {
        for (let i = this.children.length - 1; i >= 0; i--) {
            if( this.children[i].name==MeshTitle) //WebGL.scene.children[i].type === "Mesh" &&
            {
                // WebGL.scene.children[i].geometry.dispose();
                // WebGL.scene.children[i].material.dispose();
                this.remove(this.children[i]);
            }
        }
    }
    addToScene(obj, name="")
{
    // obj.position.y += this.waveAppStore.waveInitialY
    // obj.position.y += this.positionFromBottom(obj)/2
    // obj.receiveShadow = true
    if (name!="") obj.name=name
    // console.log()
    this.add(obj)
}
}

usage is simple, instead of using three.scene, use waveScene :

import waveScene from './waveScene.js'
....
export default class Three {
  constructor(canvas) {
    this.canvas = canvas;

    this.scene = new waveScene();
...

and then add meshes using the addToScene method, optionnally naming your object, like the EGG

To top