Fix effect switching race: add async disposal guards and scene cleanup to prevent stray meshes (#175)

examples/splat-transitions/effects/explosion.js

@@ -6,6 +6,7 @@ import { getAssetFileURL } from "/examples/js/get-asset-url.js";
 export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   const group = new THREE.Group();
   scene.add(group);
+  let disposed = false;
 
   // Basic lights
   const ambient = new THREE.AmbientLight(0x404040, 0.6);
@@ -329,6 +330,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   }
 
   await Promise.all([loadSplats(), loadTable()]);
+  if (disposed) return { group, update: () => {}, dispose, setupGUI };
 
   // Instructional text
   const instructionsText = textSplats({
@@ -400,6 +402,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   }
 
   function dispose() {
+    disposed = true;
     window.removeEventListener("keydown", onKeyDown);
     // Disable controls to avoid interfering with other effects
     controls.fpsMovement.enable = false;

examples/splat-transitions/effects/flow.js

@@ -6,6 +6,7 @@ import { getAssetFileURL } from "/examples/js/get-asset-url.js";
 export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   const group = new THREE.Group();
   scene.add(group);
+  let disposed = false;
 
   const PARAMETERS = {
     speedMultiplier: 0.5,
@@ -148,7 +149,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   const skyFile = "dali-env.glb";
 
   const env = await loadGLB(skyFile, true);
-  group.add(env);
+  if (!disposed) group.add(env);
 
   const meshes = [];
   const period = dyno.dynoFloat(splatFiles.length);
@@ -164,7 +165,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
     await m.initialized;
     m.position.copy(positions[i]);
     m.rotateX(Math.PI);
-    group.add(m);
+    if (!disposed) group.add(m);
     meshes.push(m);
   }
 
@@ -299,6 +300,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   }
 
   function dispose() {
+    disposed = true;
     scene.remove(group);
   }
 

examples/splat-transitions/effects/morph.js

@@ -5,6 +5,7 @@ import { getAssetFileURL } from "/examples/js/get-asset-url.js";
 export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   const group = new THREE.Group();
   scene.add(group);
+  let disposed = false;
 
   // Camera baseline for Morph effect
   camera.position.set(0, 2.2, 6.5);
@@ -169,7 +170,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
     mesh.rotateX(Math.PI);
     mesh.position.set(0, 0, 0);
     mesh.scale.set(1.5, 1.5, 1.5);
-    group.add(mesh);
+    if (!disposed) group.add(mesh);
     meshes.push(mesh);
   }
 
@@ -219,6 +220,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   }
 
   function dispose() {
+    disposed = true;
     scene.remove(group);
   }
 

examples/splat-transitions/effects/spheric.js

@@ -6,6 +6,7 @@ import { getAssetFileURL } from "/examples/js/get-asset-url.js";
 export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   const group = new THREE.Group();
   scene.add(group);
+  let disposed = false;
 
   // Params and uniforms
   const PARAMETERS = {
@@ -209,12 +210,12 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
 
   // Load env and assets
   const sky = await loadDelitGLB(skyFile, true);
-  group.add(sky);
+  if (!disposed) group.add(sky);
   const table = await loadDelitGLB(sceneFile, false);
   const sceneScale = 3.5;
   table.scale.set(sceneScale, sceneScale, sceneScale);
   table.position.set(-1, 0, -0.8);
-  group.add(table);
+  if (!disposed) group.add(table);
 
   const period = dyno.dynoFloat(splatFiles.length);
   const spereRadiusDyno = dyno.dynoFloat(PARAMETERS.spereRadius);
@@ -233,7 +234,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
       spereRadiusDyno,
       sphereHeightDyno,
     );
-    group.add(mesh);
+    if (!disposed) group.add(mesh);
     meshes.push(mesh);
   }
 
@@ -267,6 +268,7 @@ export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
   }
 
   function dispose() {
+    disposed = true;
     // Remove group
     scene.remove(group);
     // No global listeners here; controls are managed by main