update 3D scene when an <extra-model> is removed (#5187)

Fixes #5186.
### Summary & Root Cause
When an `<extra-model>` child element was removed from `<model-viewer>` (e.g. via `element.remove()`), the DOM child change triggered a `slotchange` event, which invoked `this[$updateSource]()`. However, because the primary model had already finished loading, `this.loaded` remained `true`. Inside `[$updateSource]()`, an early return check (`if (this.loaded || ...)`) caused the update to bail out before invoking `scene.setSource()`. As a result, the removed `<extra-model>`'s 3D mesh was orphaned and remained rendered inside the Three.js scene graph.
### Changes Made
* **`model-viewer-base.ts`**:
  * Updated `[$onSlotChange]` to reset `this[$loaded] = false;` and `this[$loadedTime] = 0;` whenever the list of `<extra-model>` URLs or element count changes. This allows `[$updateSource]()` to proceed past the load guard and properly synchronize the Three.js scene graph with the DOM.
  * Added explicit handling for the edge case where all primary and extra models are removed (`this.src == null && extraModels.length === 0`), directly invoking `this[$scene].reset()` and clearing loaded state.
* **`ModelScene.ts`**:
  * Updated `reset()` to ensure `this.extraUrls = [];` is properly cleared during scene resets.
* **`extra-model-spec.ts`**:

Author: diegoteran

packages/model-viewer/src/model-viewer-base.ts

@@ -212,7 +212,15 @@ export default class ModelViewerElementBase extends ReactiveElement {
     // modified its source set
     if (newExtraUrls.join(',') !== currentExtraUrls.join(',') ||
         extraModels.length !== currentExtraUrls.length) {
-      this[$updateSource]();
+      if (this.src == null && extraModels.length === 0) {
+        this[$loaded] = false;
+        this[$loadedTime] = 0;
+        this[$scene].reset();
+      } else {
+        this[$loaded] = false;
+        this[$loadedTime] = 0;
+        this[$updateSource]();
+      }
     }
   };
 
@@ -230,6 +238,7 @@ export default class ModelViewerElementBase extends ReactiveElement {
 
     if (customEv.detail.srcChanged) {
       this[$loaded] = false;
+      this[$loadedTime] = 0;
       this[$updateSource]();
     } else {
       // Apply Transforms

packages/model-viewer/src/test/features/extra-model-spec.ts

@@ -57,6 +57,45 @@ suite('ExtraModel', () => {
       expect(scene._models.length).to.equal(2);
     });
 
+    test('removes extra-model and updates the scene', async () => {
+      element.loading = 'eager';
+      element.src = CUBE_GLB_PATH;
+
+      const extra = document.createElement('extra-model');
+      extra.setAttribute('src', CUBE_GLB_PATH);
+      element.appendChild(extra);
+
+      await waitForEvent(element, 'load');
+
+      const scene = (element as any)[$scene];
+      expect(scene._models.length).to.equal(2);
+
+      const loadEvent = waitForEvent(element, 'load');
+      element.removeChild(extra);
+      await loadEvent;
+
+      expect(scene._models.length).to.equal(1);
+    });
+
+    test('removes all extra-models when src is null', async () => {
+      element.loading = 'eager';
+
+      const extra = document.createElement('extra-model');
+      extra.setAttribute('src', CUBE_GLB_PATH);
+      element.appendChild(extra);
+
+      await waitForEvent(element, 'load');
+
+      const scene = (element as any)[$scene];
+      expect(scene._models.length).to.equal(1);
+
+      element.removeChild(extra);
+      await timePasses();
+
+      expect(scene._models.length).to.equal(0);
+      expect(scene.extraUrls.length).to.equal(0);
+    });
+
     test('updates position dynamically when offset changes', async () => {
       element.loading = 'eager';
       element.src = CUBE_GLB_PATH;
@@ -102,31 +141,32 @@ suite('ExtraModel', () => {
       expect(scene._models[1].position.x).to.be.closeTo(3, 0.001);
     });
 
-    test('applies orientation as rotation on the model quaternion', async () => {
-      element.loading = 'eager';
-      element.src = CUBE_GLB_PATH;
+    test(
+        'applies orientation as rotation on the model quaternion', async () => {
+          element.loading = 'eager';
+          element.src = CUBE_GLB_PATH;
 
-      const extra = document.createElement('extra-model');
-      extra.setAttribute('src', CUBE_GLB_PATH);
-      // yaw = 90deg (third term in roll/pitch/yaw) → Euler(0, π/2, 0, 'YXZ')
-      // → quaternion.y ≈ 0.707, quaternion.w ≈ 0.707
-      extra.setAttribute('orientation', '0deg 0deg 90deg');
-      element.appendChild(extra);
+          const extra = document.createElement('extra-model');
+          extra.setAttribute('src', CUBE_GLB_PATH);
+          // yaw = 90deg (third term in roll/pitch/yaw) → Euler(0, π/2, 0,
+          // 'YXZ') → quaternion.y ≈ 0.707, quaternion.w ≈ 0.707
+          extra.setAttribute('orientation', '0deg 0deg 90deg');
+          element.appendChild(extra);
 
-      await waitForEvent(element, 'load');
+          await waitForEvent(element, 'load');
 
-      const scene = (element as any)[$scene];
-      const q = scene._models[1].quaternion;
-      expect(q.y).to.be.closeTo(Math.sin(Math.PI / 4), 0.001);
-      expect(q.w).to.be.closeTo(Math.cos(Math.PI / 4), 0.001);
+          const scene = (element as any)[$scene];
+          const q = scene._models[1].quaternion;
+          expect(q.y).to.be.closeTo(Math.sin(Math.PI / 4), 0.001);
+          expect(q.w).to.be.closeTo(Math.cos(Math.PI / 4), 0.001);
 
-      // Update dynamically
-      extra.setAttribute('orientation', '0deg 0deg 0deg');
-      await timePasses();
+          // Update dynamically
+          extra.setAttribute('orientation', '0deg 0deg 0deg');
+          await timePasses();
 
-      expect(scene._models[1].quaternion.y).to.be.closeTo(0, 0.001);
-      expect(scene._models[1].quaternion.w).to.be.closeTo(1, 0.001);
-    });
+          expect(scene._models[1].quaternion.y).to.be.closeTo(0, 0.001);
+          expect(scene._models[1].quaternion.w).to.be.closeTo(1, 0.001);
+        });
 
     test(
         'does not calculate bounding box synchronously when offset changes',

packages/model-viewer/src/three-components/ModelScene.ts

@@ -396,6 +396,7 @@ export class ModelScene extends Scene {
 
   reset() {
     this.url = null;
+    this.extraUrls = [];
     this.renderCount = 0;
     this.queueRender();
     if (this.shadow != null) {