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