@shopware-ag/dive 3.1.0 → 4.0.1

package/build/plugins/mediacreator/index.mjs

@@ -1,58 +1,60 @@
-var g = Object.defineProperty;
-var p = (c, t, e) => t in c ? g(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var a = (c, t, e) => p(c, typeof t != "symbol" ? t + "" : t, e);
-import { RenderTarget as y, SRGBColorSpace as w } from "three/webgpu";
-import { D as b } from "../../chunks/PerspectiveCamera-B5TvUzTa.mjs";
-class T {
-  constructor(t, e, r) {
-    a(this, "_renderer");
-    a(this, "_scene");
-    a(this, "_controller");
-    this._renderer = t, this._scene = e, this._controller = r;
+var l = Object.defineProperty;
+var p = (a, t, r) => t in a ? l(a, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : a[t] = r;
+var h = (a, t, r) => p(a, typeof t != "symbol" ? t + "" : t, r);
+import { RenderTarget as w, SRGBColorSpace as y } from "three/webgpu";
+import { D as C } from "../../chunks/FileTypes-D3Dxr2dj.mjs";
+import "three/examples/jsm/loaders/HDRLoader.js";
+import "three/tsl";
+class M {
+  constructor(t, r, e) {
+    h(this, "_renderer");
+    h(this, "_scene");
+    h(this, "_controller");
+    this._renderer = t, this._scene = r, this._controller = e;
   }
   async generateMedia(t) {
-    const { position: e, target: r, resolution: i } = t, { width: o, height: s } = i, h = this._controller.object.position.clone(), d = this._controller.object.quaternion.clone(), l = this._controller.target.clone(), n = this._renderer.canvas.clientWidth || o, _ = this._renderer.canvas.clientHeight || s;
+    const { position: r, target: e, resolution: i } = t, { width: o, height: s } = i, d = this._controller.object.owner.position.clone(), n = this._controller.target.clone(), _ = this._renderer.canvas.clientWidth || o, g = this._renderer.canvas.clientHeight || s;
     try {
-      return "onResize" in this._controller.object && this._controller.object.onResize(o, s), this._controller.object.position.copy(e), this._controller.target.copy(r), this._controller.update(), (await this.drawCanvas(void 0, i)).toDataURL();
+      return this._controller.object.onResize(o, s), this._controller.object.owner.position.copy(r), this._controller.target.copy(e), this._controller.update(), (await this.drawCanvas(void 0, i)).toDataURL();
     } finally {
-      this._controller.object.position.copy(h), this._controller.object.quaternion.copy(d), this._controller.target.copy(l), this._controller.update(), "onResize" in this._controller.object && this._controller.object.onResize(n, _);
+      this._controller.object.owner.position.copy(d), this._controller.target.copy(n), this._controller.update(), this._controller.object.onResize(_, g);
     }
   }
-  async drawCanvas(t, e) {
+  async drawCanvas(t, r) {
     await this._renderer.initAsync();
-    const r = this._renderer.webgpurenderer, i = Math.max(
+    const e = this._renderer.webgpurenderer, i = Math.max(
       1,
-      (e == null ? void 0 : e.width) ?? (t == null ? void 0 : t.width) ?? (t == null ? void 0 : t.clientWidth) ?? this._renderer.canvas.clientWidth
+      (r == null ? void 0 : r.width) ?? (t == null ? void 0 : t.width) ?? (t == null ? void 0 : t.clientWidth) ?? this._renderer.canvas.clientWidth
     ), o = Math.max(
       1,
-      (e == null ? void 0 : e.height) ?? (t == null ? void 0 : t.height) ?? (t == null ? void 0 : t.clientHeight) ?? this._renderer.canvas.clientHeight
-    ), s = new y(i, o, {
-      colorSpace: w
-    }), h = r.getRenderTarget(), d = this._controller.object.layers.mask;
+      (r == null ? void 0 : r.height) ?? (t == null ? void 0 : t.height) ?? (t == null ? void 0 : t.clientHeight) ?? this._renderer.canvas.clientHeight
+    ), s = new w(i, o, {
+      colorSpace: y
+    }), d = e.getRenderTarget(), n = this._controller.object.camera, _ = n.layers.mask;
     try {
-      r.setRenderTarget(s), this._controller.object.layers.mask = b.LIVE_VIEW_LAYER_MASK, r.render(this._scene, this._controller.object);
-      const l = await r.readRenderTargetPixelsAsync(
+      e.setRenderTarget(s), n.layers.mask = C.LIVE_VIEW_LAYER_MASK, e.render(this._scene, n);
+      const g = await e.readRenderTargetPixelsAsync(
         s,
         0,
         0,
         i,
         o
-      ), n = t ?? document.createElement("canvas");
-      return n.width = i, n.height = o, this._writePixelsToCanvas(n, l, i, o), n;
+      ), c = t ?? document.createElement("canvas");
+      return c.width = i, c.height = o, this._writePixelsToCanvas(c, g, i, o), c;
     } finally {
-      this._controller.object.layers.mask = d, r.setRenderTarget(h), s.dispose();
+      n.layers.mask = _, e.setRenderTarget(d), s.dispose();
     }
   }
-  _writePixelsToCanvas(t, e, r, i) {
+  _writePixelsToCanvas(t, r, e, i) {
     const o = t.getContext("2d");
     if (!o)
       throw new Error(
         "MediaCreator.drawCanvas: 2D canvas context is not available."
       );
-    const s = o.createImageData(r, i);
-    s.data.set(new Uint8ClampedArray(Array.from(e))), o.putImageData(s, 0, 0);
+    const s = o.createImageData(e, i);
+    s.data.set(new Uint8ClampedArray(Array.from(r))), o.putImageData(s, 0, 0);
   }
 }
 export {
-  T as MediaCreator
+  M as MediaCreator
 };

package/build/plugins/mediacreator/src/MediaCreator.d.ts

@@ -1,5 +1,4 @@
-import { DIVEScene } from '../../../engine/scene/Scene.ts';
-import { DIVERenderer } from '../../../engine/renderer/Renderer.ts';
+import { DIVEScene, DIVERenderer } from '../../../index.ts';
 import { OrbitController } from '../../orbitcontroller/index.ts';
 import { MediaGenerationByPosition, MediaGenerationResolution } from '../types/index.ts';
 /**

package/build/plugins/orbitcontroller/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../chunks/FileTypes-Cgyf8ocm.cjs");exports.OrbitController=t.OrbitController;exports.OrbitControllerDefaultSettings=t.OrbitControllerDefaultSettings;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../chunks/OrbitController-CAJIiZeE.cjs");exports.OrbitController=t.OrbitController;exports.OrbitControllerDefaultSettings=t.OrbitControllerDefaultSettings;

package/build/plugins/orbitcontroller/index.d.ts

@@ -1 +1,2 @@
 export * from './src/OrbitController.ts';
+export * from './types/index.ts';

package/build/plugins/orbitcontroller/index.mjs

@@ -1,4 +1,4 @@
-import { O as o, a as e } from "../../chunks/FileTypes-DiYB3WBp.mjs";
+import { O as o, a as e } from "../../chunks/OrbitController-DxCbrQVB.mjs";
 export {
   o as OrbitController,
   e as OrbitControllerDefaultSettings

package/build/plugins/orbitcontroller/src/OrbitController.d.ts

@@ -1,5 +1,5 @@
-import { EventDispatcher, MOUSE, Object3D, OrthographicCamera, TOUCH, Vector3, Vector3Like } from 'three/webgpu';
-import { DIVEPerspectiveCamera, DIVETicker, BoundingBox } from '../../../index.ts';
+import { EventDispatcher, MOUSE, Sphere, TOUCH, Vector3, Vector3Like } from 'three/webgpu';
+import { DIVENode, DIVETicker, DIVECameraComponent } from '../../../index.ts';
 import { OrbitControllerState } from '../types/index.ts';
 export type OrbitControllerSettings = {
     enableDamping?: boolean;
@@ -57,7 +57,21 @@ type EventMap = {
 };
 export declare class OrbitController extends EventDispatcher<EventMap> implements DIVETicker {
     static readonly DEFAULT_ZOOM_FACTOR = 1;
-    object: DIVEPerspectiveCamera | OrthographicCamera;
+    /**
+     * The camera component this controller drives.
+     *
+     * The component rather than the camera: `setCameraLayer` and `onResize` live
+     * there, and handing out the bare camera meant every caller had to search its
+     * way back. What orbiting moves is `object.owner`, the node it sits on.
+     */
+    object: DIVECameraComponent;
+    /**
+     * The camera, narrowed to the two kinds whose projection this can pan.
+     *
+     * `DIVECameraComponent` types its camera as the base `Camera`, which has no
+     * `zoom` or `fov`; the branches below narrow it further.
+     */
+    private get _camera();
     get domElement(): HTMLCanvasElement;
     domElements: HTMLCanvasElement[];
     enabled: boolean;
@@ -125,7 +139,7 @@ export declare class OrbitController extends EventDispatcher<EventMap> implement
     private readonly lastPosition;
     private readonly lastQuaternion;
     private readonly lastTarget;
-    constructor(camera: DIVEPerspectiveCamera | OrthographicCamera, domElements: HTMLCanvasElement | HTMLCanvasElement[], settings?: OrbitControllerSettings);
+    constructor(cameraComponent: DIVECameraComponent, domElements: HTMLCanvasElement | HTMLCanvasElement[], settings?: OrbitControllerSettings);
     tick(): void;
     getPolarAngle(): number;
     getAzimuthalAngle(): number;
@@ -137,11 +151,30 @@ export declare class OrbitController extends EventDispatcher<EventMap> implement
     addDomElements(...domElements: HTMLCanvasElement[]): void;
     removeDomElements(...domElements: HTMLCanvasElement[]): void;
     setDomElements(...domElements: HTMLCanvasElement[]): void;
-    computeEncompassingView(bb: BoundingBox, padding?: number): {
+    /**
+     * Where to put the camera so a sphere fills the view.
+     *
+     * Takes a `Sphere` rather than a bounding box: framing needs a centre and a
+     * radius, and nothing else. Build one with `new BoundingBox().enclose(...)`,
+     * or read `sphere` off a `BoundingBoxComponent` that already measures a node.
+     *
+     * @param sphere - What to frame, in world space.
+     * @param padding - Extra distance as a fraction of the fitted one.
+     */
+    computeEncompassingView(sphere: Sphere, padding?: number): {
         position: Vector3Like;
         target: Vector3Like;
     };
-    focusObject(objects: Object3D | Object3D[], padding?: number): void;
+    /**
+     * Puts the camera where the whole node fits in the view.
+     *
+     * One node, not a list: a node already is the handle for everything below it,
+     * so anything worth framing together belongs under a common parent.
+     *
+     * @param node - What to frame.
+     * @param padding - Extra distance as a fraction of the fitted one.
+     */
+    focusObject(node: DIVENode, padding?: number): void;
     zoomIn(by?: number): void;
     zoomOut(by?: number): void;
     getState(): OrbitControllerState;

package/build/plugins/orientationdisplay/index.cjs

@@ -1 +1 @@
-"use strict";var p=Object.defineProperty;var c=(s,r,e)=>r in s?p(s,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[r]=e;var o=(s,r,e)=>c(s,typeof r!="symbol"?r+"":r,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("three/webgpu");require("../../chunks/FileTypes-Cgyf8ocm.cjs");const h=require("../../chunks/PerspectiveCamera-DwQUmkDv.cjs");require("three/examples/jsm/loaders/HDRLoader.js");require("three/tsl");const n=require("../../chunks/AxisHelperColors-BrGqktN5.cjs"),_=require("../../chunks/SpriteText-2lCRglsw.cjs");class l extends t.Object3D{constructor(){super();o(this,"_axesHelper");this._axesHelper=new t.AxesHelper(.5),this._axesHelper.layers.mask=h.COORDINATE_LAYER_MASK,this._axesHelper.material.depthTest=!1,this._axesHelper.position.set(0,0,-1),this._axesHelper.setColors(new t.Color(n.AxesColorRed),new t.Color(n.AxesColorGreen),new t.Color(n.AxesColorBlue));const e=new _.DIVESpriteText("X",.2,n.AxesColorRedLetter),i=new _.DIVESpriteText("Y",.2,n.AxesColorGreenLetter),a=new _.DIVESpriteText("Z",.2,n.AxesColorBlueLetter);e.layers.mask=h.COORDINATE_LAYER_MASK,i.layers.mask=h.COORDINATE_LAYER_MASK,a.layers.mask=h.COORDINATE_LAYER_MASK,e.position.set(.7,0,0),i.position.set(0,.7,0),a.position.set(0,0,.7),this._axesHelper.add(e),this._axesHelper.add(i),this._axesHelper.add(a),this.add(this._axesHelper)}setFromCameraMatrix(e){this._axesHelper.rotation.setFromRotationMatrix(new t.Matrix4().extractRotation(e).invert())}}class d{constructor(r,e,i){o(this,"uuid",t.MathUtils.generateUUID());o(this,"_axes");o(this,"_orthographicCamera");o(this,"_restoreViewport",new t.Vector4);this._renderer=r,this._scene=e,this._camera=i,this._orthographicCamera=new t.OrthographicCamera(-1,1,1,-1,.1,100),this._orthographicCamera.name="OrientationDisplayCamera",this._orthographicCamera.layers.mask=h.COORDINATE_LAYER_MASK,this._scene.add(this._orthographicCamera),this._axes=new l,this._axes.name="OrientationDisplayAxes",this._scene.add(this._axes)}tick(){var a;if(!this._renderer.webgpurenderer.initialized)return;const r=this._scene.background??null,e=this._renderer.webgpurenderer.autoClear;this._scene.background=null,this._renderer.webgpurenderer.getViewport(this._restoreViewport);const i=((a=this._renderer.webgpurenderer.domElement)==null?void 0:a.clientHeight)??this._restoreViewport.w;this._renderer.webgpurenderer.setViewport(0,Math.max(0,i-150),150,150),this._renderer.webgpurenderer.autoClear=!1,this._axes.setFromCameraMatrix(this._camera.matrix),this._renderer.webgpurenderer.render(this._scene,this._orthographicCamera),this._renderer.webgpurenderer.setViewport(this._restoreViewport),this._renderer.webgpurenderer.autoClear=e,this._scene.background=r}dispose(){this._scene.remove(this._axes),this._scene.remove(this._orthographicCamera)}}exports.OrientationDisplay=d;exports.OrientationDisplayAxes=l;
+"use strict";var _=Object.defineProperty;var c=(t,e,r)=>e in t?_(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r;var o=(t,e,r)=>c(t,typeof e!="symbol"?e+"":e,r);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("three/webgpu"),d=require("../../chunks/FileTypes-B-MjfMGd.cjs"),h=require("../../chunks/contributesToBounds-C1mva__U.cjs");require("three/examples/jsm/loaders/HDRLoader.js");require("three/tsl");const a=require("../../chunks/AxisHelperColors-BrGqktN5.cjs"),x=require("../../chunks/SpriteTextComponent-BpoKLOjA.cjs"),n=(t,e,r)=>{const i=new d.DIVENode;return i.position.set(r.x,r.y,r.z),i.layers.mask=h.COORDINATE_LAYER_MASK,i.addComponent(new x.SpriteTextComponent).setText(t).setTextHeight(.2).setColor(e),i};class p extends s.Object3D{constructor(){super();o(this,"_axesHelper");this._axesHelper=new s.AxesHelper(.5),this._axesHelper.layers.mask=h.COORDINATE_LAYER_MASK,this._axesHelper.material.depthTest=!1,this._axesHelper.position.set(0,0,-1),this._axesHelper.setColors(new s.Color(a.AxesColorRed),new s.Color(a.AxesColorGreen),new s.Color(a.AxesColorBlue)),this._axesHelper.add(n("X",a.AxesColorRedLetter,{x:.7,y:0,z:0}),n("Y",a.AxesColorGreenLetter,{x:0,y:.7,z:0}),n("Z",a.AxesColorBlueLetter,{x:0,y:0,z:.7})),this.add(this._axesHelper)}setFromCameraMatrix(r){this._axesHelper.rotation.setFromRotationMatrix(new s.Matrix4().extractRotation(r).invert())}}class u{constructor(e,r,i){o(this,"uuid",s.MathUtils.generateUUID());o(this,"_axes");o(this,"_orthographicCamera");o(this,"_restoreViewport",new s.Vector4);this._renderer=e,this._scene=r,this._cameraComponent=i,this._orthographicCamera=new s.OrthographicCamera(-1,1,1,-1,.1,100),this._orthographicCamera.name="OrientationDisplayCamera",this._orthographicCamera.layers.mask=h.COORDINATE_LAYER_MASK,this._scene.add(this._orthographicCamera),this._axes=new p,this._axes.name="OrientationDisplayAxes",this._scene.add(this._axes)}tick(){var l;if(!this._renderer.webgpurenderer.initialized)return;const e=this._scene.background??null,r=this._renderer.webgpurenderer.autoClear;this._scene.background=null,this._renderer.webgpurenderer.getViewport(this._restoreViewport);const i=((l=this._renderer.webgpurenderer.domElement)==null?void 0:l.clientHeight)??this._restoreViewport.w;this._renderer.webgpurenderer.setViewport(0,Math.max(0,i-150),150,150),this._renderer.webgpurenderer.autoClear=!1,this._axes.setFromCameraMatrix(this._cameraComponent.camera.matrixWorld),this._renderer.webgpurenderer.render(this._scene,this._orthographicCamera),this._renderer.webgpurenderer.setViewport(this._restoreViewport),this._renderer.webgpurenderer.autoClear=r,this._scene.background=e}dispose(){this._scene.remove(this._axes),this._scene.remove(this._orthographicCamera)}}exports.OrientationDisplay=u;exports.OrientationDisplayAxes=p;

package/build/plugins/orientationdisplay/index.mjs

@@ -1,61 +1,69 @@
 var p = Object.defineProperty;
-var _ = (t, r, e) => r in t ? p(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
-var i = (t, r, e) => _(t, typeof r != "symbol" ? r + "" : r, e);
-import { Object3D as l, AxesHelper as d, Color as n, Matrix4 as c, OrthographicCamera as m, MathUtils as x, Vector4 as w } from "three/webgpu";
-import "../../chunks/FileTypes-DiYB3WBp.mjs";
-import { C as o } from "../../chunks/PerspectiveCamera-B5TvUzTa.mjs";
+var _ = (t, e, r) => e in t ? p(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var a = (t, e, r) => _(t, typeof e != "symbol" ? e + "" : e, r);
+import { Object3D as d, AxesHelper as l, Color as o, Matrix4 as m, OrthographicCamera as c, MathUtils as x, Vector4 as C } from "three/webgpu";
+import { d as u } from "../../chunks/FileTypes-D3Dxr2dj.mjs";
+import { C as n } from "../../chunks/contributesToBounds-DYmHYES4.mjs";
 import "three/examples/jsm/loaders/HDRLoader.js";
 import "three/tsl";
-import { A as u, a as g, b as C, c as b, d as A, e as H } from "../../chunks/AxisHelperColors-JLBHYQDi.mjs";
-import { D as h } from "../../chunks/SpriteText-C_CQPvUn.mjs";
-class k extends l {
+import { A as w, a as g, b, c as A, d as H, e as y } from "../../chunks/AxisHelperColors-JLBHYQDi.mjs";
+import { S as V } from "../../chunks/SpriteTextComponent-DIZFqao0.mjs";
+const i = (t, e, r) => {
+  const s = new u();
+  return s.position.set(r.x, r.y, r.z), s.layers.mask = n, s.addComponent(new V()).setText(t).setTextHeight(0.2).setColor(e), s;
+};
+class f extends d {
   constructor() {
     super();
-    i(this, "_axesHelper");
-    this._axesHelper = new d(0.5), this._axesHelper.layers.mask = o, this._axesHelper.material.depthTest = !1, this._axesHelper.position.set(0, 0, -1), this._axesHelper.setColors(
-      new n(u),
-      new n(g),
-      new n(C)
-    );
-    const e = new h("X", 0.2, b), s = new h("Y", 0.2, A), a = new h("Z", 0.2, H);
-    e.layers.mask = o, s.layers.mask = o, a.layers.mask = o, e.position.set(0.7, 0, 0), s.position.set(0, 0.7, 0), a.position.set(0, 0, 0.7), this._axesHelper.add(e), this._axesHelper.add(s), this._axesHelper.add(a), this.add(this._axesHelper);
+    a(this, "_axesHelper");
+    this._axesHelper = new l(0.5), this._axesHelper.layers.mask = n, this._axesHelper.material.depthTest = !1, this._axesHelper.position.set(0, 0, -1), this._axesHelper.setColors(
+      new o(w),
+      new o(g),
+      new o(b)
+    ), this._axesHelper.add(
+      i("X", A, { x: 0.7, y: 0, z: 0 }),
+      i("Y", H, { x: 0, y: 0.7, z: 0 }),
+      i("Z", y, { x: 0, y: 0, z: 0.7 })
+    ), this.add(this._axesHelper);
   }
-  setFromCameraMatrix(e) {
+  setFromCameraMatrix(r) {
     this._axesHelper.rotation.setFromRotationMatrix(
-      new c().extractRotation(e).invert()
+      new m().extractRotation(r).invert()
     );
   }
 }
 class E {
-  constructor(r, e, s) {
-    i(this, "uuid", x.generateUUID());
-    i(this, "_axes");
-    i(this, "_orthographicCamera");
-    i(this, "_restoreViewport", new w());
-    this._renderer = r, this._scene = e, this._camera = s, this._orthographicCamera = new m(
+  constructor(e, r, s) {
+    a(this, "uuid", x.generateUUID());
+    a(this, "_axes");
+    a(this, "_orthographicCamera");
+    a(this, "_restoreViewport", new C());
+    this._renderer = e, this._scene = r, this._cameraComponent = s, this._orthographicCamera = new c(
       -1,
       1,
       1,
       -1,
       0.1,
       100
-    ), this._orthographicCamera.name = "OrientationDisplayCamera", this._orthographicCamera.layers.mask = o, this._scene.add(this._orthographicCamera), this._axes = new k(), this._axes.name = "OrientationDisplayAxes", this._scene.add(this._axes);
+    ), this._orthographicCamera.name = "OrientationDisplayCamera", this._orthographicCamera.layers.mask = n, this._scene.add(this._orthographicCamera), this._axes = new f(), this._axes.name = "OrientationDisplayAxes", this._scene.add(this._axes);
   }
   tick() {
-    var a;
+    var h;
     if (!this._renderer.webgpurenderer.initialized) return;
-    const r = this._scene.background ?? null, e = this._renderer.webgpurenderer.autoClear;
+    const e = this._scene.background ?? null, r = this._renderer.webgpurenderer.autoClear;
     this._scene.background = null, this._renderer.webgpurenderer.getViewport(this._restoreViewport);
-    const s = ((a = this._renderer.webgpurenderer.domElement) == null ? void 0 : a.clientHeight) ?? this._restoreViewport.w;
+    const s = ((h = this._renderer.webgpurenderer.domElement) == null ? void 0 : h.clientHeight) ?? this._restoreViewport.w;
     this._renderer.webgpurenderer.setViewport(
       0,
       Math.max(0, s - 150),
       150,
       150
-    ), this._renderer.webgpurenderer.autoClear = !1, this._axes.setFromCameraMatrix(this._camera.matrix), this._renderer.webgpurenderer.render(
+    ), this._renderer.webgpurenderer.autoClear = !1, this._axes.setFromCameraMatrix(
+      this._cameraComponent.camera.matrixWorld
+    ), this._renderer.webgpurenderer.render(
       this._scene,
       this._orthographicCamera
-    ), this._renderer.webgpurenderer.setViewport(this._restoreViewport), this._renderer.webgpurenderer.autoClear = e, this._scene.background = r;
+    ), this._renderer.webgpurenderer.setViewport(this._restoreViewport), this._renderer.webgpurenderer.autoClear = r, this._scene.background = e;
   }
   dispose() {
     this._scene.remove(this._axes), this._scene.remove(this._orthographicCamera);
@@ -63,5 +71,5 @@ class E {
 }
 export {
   E as OrientationDisplay,
-  k as OrientationDisplayAxes
+  f as OrientationDisplayAxes
 };

package/build/plugins/orientationdisplay/src/OrientationDisplay.d.ts

@@ -1,4 +1,4 @@
-import { DIVERenderer, DIVETicker, DIVEScene, DIVEPerspectiveCamera } from '../../../index.ts';
+import { DIVECameraComponent, DIVERenderer, DIVETicker, DIVEScene } from '../../../index.ts';
 /**
  * Shows the scene axes in the bottom left corner of the screen.
  *
@@ -7,12 +7,12 @@ import { DIVERenderer, DIVETicker, DIVEScene, DIVEPerspectiveCamera } from '../.
 export declare class OrientationDisplay implements DIVETicker {
     private _renderer;
     private _scene;
-    private _camera;
+    private _cameraComponent;
     uuid: string;
     private _axes;
     private _orthographicCamera;
     private _restoreViewport;
-    constructor(_renderer: DIVERenderer, _scene: DIVEScene, _camera: DIVEPerspectiveCamera);
+    constructor(_renderer: DIVERenderer, _scene: DIVEScene, _cameraComponent: DIVECameraComponent);
     tick(): void;
     dispose(): void;
 }

package/build/plugins/quickview/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../../chunks/FileTypes-Cgyf8ocm.cjs");require("three/webgpu");require("three/examples/jsm/loaders/HDRLoader.js");require("three/tsl");const u=async(r,i)=>{try{const e=new a.DIVE({...i,autoStart:!1});e.mainView.camera.position.set(0,1,2);const t=await new a.DIVEModel().setFromURL(r);e.scene.root.add(t),t.placeOnFloor();const o=new a.OrbitController(e.mainView.camera,e.mainView.canvas);e.clock.addTicker(o);const c=Object.assign(e,{orbitController:o,model:t}),n=e.disposeAsync.bind(e);return c.disposeAsync=async()=>{o.dispose(),await n()},((i==null?void 0:i.autoStart)??!0)&&(await e.startAsync(),o.focusObject(t)),c}catch(e){return console.error("Failed to initialize QuickView:",e),Promise.reject(e)}},w=async(r,i)=>{try{const e=new a.DIVE({...i,autoStart:!1});e.mainView.camera.position.set(0,1,2);const t=new a.OrbitController(e.mainView.camera,e.mainView.canvas);e.clock.addTicker(t);const o=new(await Promise.resolve().then(()=>require("../state/index.cjs"))).State(e,t),c=Object.assign(e,{orbitController:t,state:o}),n=e.disposeAsync.bind(e);c.disposeAsync=async()=>{t.dispose(),o.destroyInstance(),await n()};const s=(await o.performAction("SET_STATE",r)).filter(l=>"isDIVEModel"in l||"isDIVEPrimitive"in l);return s.length>0&&t.focusObject(s),((i==null?void 0:i.autoStart)??!0)&&await e.startAsync(),c}catch(e){return console.error("Failed to initialize QuickView:",e),Promise.reject(e)}},d={...a.DIVEDefaultSettings};function V(r,i){return typeof r=="string"?u(r,i):w(r,i)}exports.QuickView=V;exports.QuickViewDefaultSettings=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../chunks/FileTypes-B-MjfMGd.cjs");require("three/webgpu");require("three/examples/jsm/loaders/HDRLoader.js");require("three/tsl");const C=require("../../chunks/ModelComponent-Cmu0EX0r.cjs"),S=require("../../chunks/OrbitController-CAJIiZeE.cjs"),v={...i.DIVEDefaultSettings},w=c=>{i.disposeComponents(c),c.removeFromParent()};async function E(c,l){let s=!1;const e=new i.DIVE({...l,autoStart:!1});try{e.mainView.cameraComponent.owner.position.set(0,1,2);const{clientWidth:u,clientHeight:d}=e.mainView.canvas;u>0&&d>0&&e.mainView.cameraComponent.onResize(u,d);const a=new S.OrbitController(e.mainView.cameraComponent,e.mainView.canvas);e.clock.addTicker(a);let t=null,r=null,m=0,f=Promise.resolve();const b=()=>{const o=t??e.scene.root;new i.BoundingBox().enclose(o).isEmpty||a.focusObject(o)},p=()=>{t&&(w(t),t=null),r&&(r.destroyInstance(),r=null,e.scene.root.nodes.forEach(w))},g=e.disposeAsync.bind(e);e.disposeAsync=async()=>{s=!0,m++,a.dispose(),p(),await g()};const k=async o=>{r&&p(),t||(t=new i.DIVENode,t.name="QuickViewModel",t.addComponent(new C.ModelComponent),e.scene.root.add(t));const n=t;if(await n.requireComponent(C.ModelComponent).setFromURL(o),s){i.disposeComponents(n),n.removeFromParent();return}n.dropIt()},q=async o=>{p();const n=new(await Promise.resolve().then(()=>require("../state/index.cjs"))).State(e,a);if(r=n,await n.performAction("SET_STATE",o),s){n.destroyInstance(),e.scene.root.nodes.forEach(w);return}},y=o=>{const n=++m,h=f.then(()=>{if(!(n!==m||s))return typeof o=="string"?k(o):q(o)});return f=h.then(()=>{},()=>{}),h},V=Object.assign(e,{orbitController:a,load:y});return Object.defineProperties(V,{model:{get:()=>t,enumerable:!0},state:{get:()=>r,enumerable:!0}}),await y(c),b(),((l==null?void 0:l.autoStart)??!0)&&await e.startAsync(),V}catch(u){s=!0;try{await e.disposeAsync()}catch(d){console.error("Failed to clean up a QuickView:",d)}throw u}}exports.QuickView=E;exports.QuickViewDefaultSettings=v;

package/build/plugins/quickview/index.mjs

@@ -1,55 +1,78 @@
-import { D as l, b as u, O as w, c as d } from "../../chunks/FileTypes-DiYB3WBp.mjs";
+import { b as v, c as A, B as D, d as I, e as b } from "../../chunks/FileTypes-D3Dxr2dj.mjs";
 import "three/webgpu";
 import "three/examples/jsm/loaders/HDRLoader.js";
 import "three/tsl";
-const m = async (a, e) => {
-  try {
-    const i = new l({ ...e, autoStart: !1 });
-    i.mainView.camera.position.set(0, 1, 2);
-    const o = await new u().setFromURL(a);
-    i.scene.root.add(o), o.placeOnFloor();
-    const t = new w(
-      i.mainView.camera,
-      i.mainView.canvas
-    );
-    i.clock.addTicker(t);
-    const r = Object.assign(i, { orbitController: t, model: o }), c = i.disposeAsync.bind(i);
-    return r.disposeAsync = async () => {
-      t.dispose(), await c();
-    }, ((e == null ? void 0 : e.autoStart) ?? !0) && (await i.startAsync(), t.focusObject(o)), r;
-  } catch (i) {
-    return console.error("Failed to initialize QuickView:", i), Promise.reject(i);
-  }
-}, p = async (a, e) => {
+import { M as h } from "../../chunks/ModelComponent-WA0kLOEY.mjs";
+import { O as S } from "../../chunks/OrbitController-DxCbrQVB.mjs";
+const q = {
+  ...v
+}, p = (s) => {
+  b(s), s.removeFromParent();
+};
+async function B(s, c) {
+  let a = !1;
+  const e = new A({ ...c, autoStart: !1 });
   try {
-    const i = new l({ ...e, autoStart: !1 });
-    i.mainView.camera.position.set(0, 1, 2);
-    const o = new w(
-      i.mainView.camera,
-      i.mainView.canvas
+    e.mainView.cameraComponent.owner.position.set(0, 1, 2);
+    const { clientWidth: l, clientHeight: m } = e.mainView.canvas;
+    l > 0 && m > 0 && e.mainView.cameraComponent.onResize(l, m);
+    const i = new S(
+      e.mainView.cameraComponent,
+      e.mainView.canvas
     );
-    i.clock.addTicker(o);
-    const t = new (await import("../state/index.mjs")).State(
-      i,
-      o
-    ), r = Object.assign(i, { orbitController: o, state: t }), c = i.disposeAsync.bind(i);
-    r.disposeAsync = async () => {
-      o.dispose(), t.destroyInstance(), await c();
+    e.clock.addTicker(i);
+    let t = null, r = null, d = 0, f = Promise.resolve();
+    const C = () => {
+      const o = t ?? e.scene.root;
+      new D().enclose(o).isEmpty || i.focusObject(o);
+    }, u = () => {
+      t && (p(t), t = null), r && (r.destroyInstance(), r = null, e.scene.root.nodes.forEach(p));
+    }, k = e.disposeAsync.bind(e);
+    e.disposeAsync = async () => {
+      a = !0, d++, i.dispose(), u(), await k();
     };
-    const n = (await t.performAction("SET_STATE", a)).filter(
-      (s) => "isDIVEModel" in s || "isDIVEPrimitive" in s
-    );
-    return n.length > 0 && o.focusObject(n), ((e == null ? void 0 : e.autoStart) ?? !0) && await i.startAsync(), r;
-  } catch (i) {
-    return console.error("Failed to initialize QuickView:", i), Promise.reject(i);
+    const E = async (o) => {
+      r && u(), t || (t = new I(), t.name = "QuickViewModel", t.addComponent(new h()), e.scene.root.add(t));
+      const n = t;
+      if (await n.requireComponent(h).setFromURL(o), a) {
+        b(n), n.removeFromParent();
+        return;
+      }
+      n.dropIt();
+    }, g = async (o) => {
+      u();
+      const n = new (await import("../state/index.mjs")).State(e, i);
+      if (r = n, await n.performAction("SET_STATE", o), a) {
+        n.destroyInstance(), e.scene.root.nodes.forEach(p);
+        return;
+      }
+    }, w = (o) => {
+      const n = ++d, V = f.then(() => {
+        if (!(n !== d || a))
+          return typeof o == "string" ? E(o) : g(o);
+      });
+      return f = V.then(
+        () => {
+        },
+        () => {
+        }
+      ), V;
+    }, y = Object.assign(e, { orbitController: i, load: w });
+    return Object.defineProperties(y, {
+      model: { get: () => t, enumerable: !0 },
+      state: { get: () => r, enumerable: !0 }
+    }), await w(s), C(), ((c == null ? void 0 : c.autoStart) ?? !0) && await e.startAsync(), y;
+  } catch (l) {
+    a = !0;
+    try {
+      await e.disposeAsync();
+    } catch (m) {
+      console.error("Failed to clean up a QuickView:", m);
+    }
+    throw l;
   }
-}, D = {
-  ...d
-};
-function S(a, e) {
-  return typeof a == "string" ? m(a, e) : p(a, e);
 }
 export {
-  S as QuickView,
-  D as QuickViewDefaultSettings
+  B as QuickView,
+  q as QuickViewDefaultSettings
 };

package/build/plugins/quickview/src/QuickView.d.ts

@@ -1,19 +1,46 @@
-import { StateData } from '../../state/index.ts';
-import { QuickViewWithModel, QuickViewWithState, QuickViewSettings } from '../types/index.ts';
-export declare const QuickViewDefaultSettings: Omit<Required<QuickViewSettings>, 'hdr'>;
+import { DIVE, DIVENode } from '../../../index.ts';
+import { OrbitController } from '../../orbitcontroller/index.ts';
+import { State, StateData } from '../../state/index.ts';
+import { QuickViewSettings } from '../types/index.ts';
 /**
- * Creates a QuickView from a model URI.
+ * What {@link QuickView} hands back.
+ *
+ * Named after the factory, and declared in the same module so it can be: a
+ * function lives in the value namespace and a type in the type one, so one
+ * import and no `type` keyword covers both.
  *
- * @param uri - The URI of the 3D model to display in QuickView
- * @param settings - The settings for the QuickView
- * @returns The DIVE instance with the orbit controller and hdr environment - { ...DIVE, orbitController: OrbitController, hdr: HDREnvironment }
+ *     import { QuickView } from '@shopware-ag/dive/quickview';
+ *     const view: Ref<QuickView | null> = ref(null);
+ *
+ * One type, because a QuickView can hold either kind of source and can be handed
+ * the other one later -- {@link load} takes whatever {@link QuickView} takes. So
+ * which of {@link model} and {@link state} is there is a question about right
+ * now, not about how the view was built, and both are therefore nullable rather
+ * than promised.
  */
-export declare function QuickView(uri: string, settings?: Partial<QuickViewSettings>): Promise<QuickViewWithModel>;
+export type QuickView = DIVE & {
+    orbitController: OrbitController;
+    /** The node the model sits on, or `null` while a scene state is loaded. */
+    readonly model: DIVENode | null;
+    /** The state driving the scene, or `null` while a single model is loaded. */
+    readonly state: State | null;
+    /**
+     * Puts something else in front of the viewer.
+     *
+     * Takes the same sources the factory does, and replaces whatever is loaded --
+     * including across kinds: a QuickView built from a URI can be handed scene
+     * state and the other way round. The previous source is torn down first, its
+     * GPU resources included.
+     *
+     * @param source - A model URI, or the scene data to apply.
+     */
+    load: (source: string | StateData) => Promise<void>;
+};
+export declare const QuickViewDefaultSettings: Omit<Required<QuickViewSettings>, 'hdr'>;
 /**
- * Creates a QuickView from scene state.
+ * Creates a QuickView from a model URI or from scene data.
  *
- * @param state - The scene data to display in QuickView
- * @param settings - The settings for the QuickView
- * @returns The DIVE instance with the orbit controller and hdr environment - { ...DIVE, orbitController: OrbitController, hdr: HDREnvironment }
+ * @param source - A model URI, or the scene data to display.
+ * @param settings - The settings for the QuickView.
  */
-export declare function QuickView(state: StateData, settings?: Partial<QuickViewSettings>): Promise<QuickViewWithState>;
+export declare function QuickView(source: string | StateData, settings?: Partial<QuickViewSettings>): Promise<QuickView>;

package/build/plugins/quickview/types/index.d.ts

@@ -1,19 +1 @@
-import { DIVE, DIVEModel } from '../../../index.ts';
-import { OrbitController } from '../../orbitcontroller/index.ts';
-import { State } from '../../state/index.ts';
 export * from './QuickViewSettings.ts';
-/** A QuickView built from a single model URI. */
-export type QuickViewWithModel = DIVE & {
-    orbitController: OrbitController;
-    model: DIVEModel;
-};
-/**
- * A QuickView built from scene state.
- *
- * Carries no single `model`, because a scene state describes any number of
- * objects. The State instance is exposed so the scene can be driven further.
- */
-export type QuickViewWithState = DIVE & {
-    orbitController: OrbitController;
-    state: State;
-};