@terraware/web-components 4.2.13 → 4.2.14-rc.1

package/components/VirtualWalkthrough/groundPlane.test.js

@@ -0,0 +1,45 @@
+import { Vec3 } from 'playcanvas';
+import { computeGroundPlane, yOnPlane } from './groundPlane';
+describe('computeGroundPlane', () => {
+  it('returns an up normal for a flat horizontal plane', () => {
+    const plane = computeGroundPlane([new Vec3(0, 5, 0), new Vec3(1, 5, 0), new Vec3(0, 5, 1)]);
+    expect(plane).not.toBeNull();
+    expect(plane.normal.x).toBeCloseTo(0);
+    expect(plane.normal.y).toBeCloseTo(1);
+    expect(plane.normal.z).toBeCloseTo(0);
+    expect(plane.point.y).toBeCloseTo(5);
+  });
+  it('flips a downward-facing normal so normal.y >= 0', () => {
+    const plane = computeGroundPlane([new Vec3(0, 0, 0), new Vec3(0, 0, 1), new Vec3(1, 0, 0)]);
+    expect(plane).not.toBeNull();
+    expect(plane.normal.y).toBeCloseTo(1);
+  });
+  it('computes a unit normal for a plane tilted 45deg about X (y = z)', () => {
+    const plane = computeGroundPlane([new Vec3(0, 0, 0), new Vec3(1, 0, 0), new Vec3(0, 1, 1)]);
+    expect(plane).not.toBeNull();
+    const n = plane.normal;
+    expect(Math.sqrt(n.x * n.x + n.y * n.y + n.z * n.z)).toBeCloseTo(1);
+    expect(n.x).toBeCloseTo(0);
+    expect(n.y).toBeCloseTo(Math.SQRT1_2);
+    expect(n.z).toBeCloseTo(-Math.SQRT1_2);
+  });
+  it('returns null for fewer than 3 points', () => {
+    expect(computeGroundPlane([new Vec3(0, 0, 0), new Vec3(1, 0, 0)])).toBeNull();
+  });
+  it('returns null for collinear points', () => {
+    expect(computeGroundPlane([new Vec3(0, 0, 0), new Vec3(1, 0, 0), new Vec3(2, 0, 0)])).toBeNull();
+  });
+});
+describe('yOnPlane', () => {
+  it('returns the constant height on a flat plane', () => {
+    expect(yOnPlane(3, 7, new Vec3(0, 1, 0), new Vec3(0, 5, 0), -1)).toBeCloseTo(5);
+  });
+  it('interpolates height on a plane where y = z', () => {
+    const n = new Vec3(0, Math.SQRT1_2, -Math.SQRT1_2);
+    expect(yOnPlane(0, 2, n, new Vec3(0, 0, 0), 0)).toBeCloseTo(2);
+    expect(yOnPlane(10, -3, n, new Vec3(0, 0, 0), 0)).toBeCloseTo(-3);
+  });
+  it('returns the fallback when the normal is (near) horizontal', () => {
+    expect(yOnPlane(1, 1, new Vec3(1, 0, 0), new Vec3(0, 9, 0), 42)).toBe(42);
+  });
+});

package/components/VirtualWalkthrough/gsplat-fade-crop-effect.d.ts

@@ -0,0 +1,19 @@
+import { Vec3 } from 'playcanvas';
+import { GsplatShaderEffect } from 'playcanvas/scripts/esm/gsplat/gsplat-shader-effect.mjs';
+/**
+ * Fade crop shader effect for gaussian splats.
+ * Applies a smooth fade to splats outside the AABB based on distance.
+ * Splats at the AABB edge are fully visible, and fade to invisible at fadeDistance away.
+ */
+export declare class GsplatFadeCropShaderEffect extends GsplatShaderEffect {
+    static scriptName: string;
+    _aabbMinArray: number[];
+    _aabbMaxArray: number[];
+    aabbMin: Vec3;
+    aabbMax: Vec3;
+    fadeDistance: number;
+    getShaderGLSL(): string;
+    getShaderWGSL(): string;
+    updateEffect(): void;
+}
+//# sourceMappingURL=gsplat-fade-crop-effect.d.ts.map

package/components/VirtualWalkthrough/gsplat-fade-crop-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gsplat-fade-crop-effect.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/gsplat-fade-crop-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AA0F5F;;;;GAIG;AACH,qBAAa,0BAA2B,SAAQ,kBAAkB;IAChE,MAAM,CAAC,UAAU,SAAgC;IAEjD,aAAa,WAAa;IAC1B,aAAa,WAAa;IAE1B,OAAO,OAA8B;IACrC,OAAO,OAA2B;IAClC,YAAY,SAAO;IAEnB,aAAa;IAIb,aAAa;IAIb,YAAY;CAab"}

package/components/VirtualWalkthrough/gsplat-fade-crop-effect.js

@@ -0,0 +1,119 @@
+import { Vec3 } from 'playcanvas';
+import { GsplatShaderEffect } from 'playcanvas/scripts/esm/gsplat/gsplat-shader-effect.mjs';
+const shaderGLSL = /* glsl */`
+uniform vec3 uAabbMin;
+uniform vec3 uAabbMax;
+uniform float uFadeDistance;
+
+void modifySplatCenter(inout vec3 center) {
+    // No modifications needed
+}
+
+void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, inout vec4 rotation, inout vec3 scale) {
+    // Check if splat is inside AABB
+    bool insideAABB = all(greaterThanEqual(modifiedCenter, uAabbMin)) && all(lessThanEqual(modifiedCenter, uAabbMax));
+
+    if (insideAABB) {
+        // Inside the box, no fade needed
+        return;
+    }
+
+    // Calculate distance to AABB for splats outside
+    vec3 distToMin = uAabbMin - modifiedCenter;
+    vec3 distToMax = modifiedCenter - uAabbMax;
+
+    // Get the maximum positive distance on each axis (how far outside we are)
+    vec3 outsideDistance = max(distToMin, distToMax);
+    outsideDistance = max(outsideDistance, vec3(0.0));
+
+    // Use the maximum distance across all axes
+    float maxOutsideDistance = max(max(outsideDistance.x, outsideDistance.y), outsideDistance.z);
+
+    // Calculate fade factor: 1.0 at edge, 0.0 at fadeDistance away
+    float fadeFactor = 1.0 - clamp(maxOutsideDistance / uFadeDistance, 0.0, 1.0);
+
+    // Apply smooth fade using smoothstep for nicer transition
+    fadeFactor = smoothstep(0.0, 1.0, fadeFactor);
+
+    // Scale the splat based on fade factor
+    scale *= fadeFactor;
+}
+
+void modifySplatColor(vec3 center, inout vec4 color) {
+    // No color modification needed
+}
+`;
+const shaderWGSL = /* wgsl */`
+uniform uAabbMin: vec3f;
+uniform uAabbMax: vec3f;
+uniform uFadeDistance: f32;
+
+fn modifySplatCenter(center: ptr<function, vec3f>) {
+    // No modifications needed
+}
+
+fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, rotation: ptr<function, vec4f>, scale: ptr<function, vec3f>) {
+    // Check if splat is inside AABB
+    let insideAABB = all(modifiedCenter >= uniform.uAabbMin) && all(modifiedCenter <= uniform.uAabbMax);
+
+    if (insideAABB) {
+        // Inside the box, no fade needed
+        return;
+    }
+
+    // Calculate distance to AABB for splats outside
+    let distToMin = uniform.uAabbMin - modifiedCenter;
+    let distToMax = modifiedCenter - uniform.uAabbMax;
+
+    // Get the maximum positive distance on each axis (how far outside we are)
+    var outsideDistance = max(distToMin, distToMax);
+    outsideDistance = max(outsideDistance, vec3f(0.0));
+
+    // Use the maximum distance across all axes
+    let maxOutsideDistance = max(max(outsideDistance.x, outsideDistance.y), outsideDistance.z);
+
+    // Calculate fade factor: 1.0 at edge, 0.0 at fadeDistance away
+    var fadeFactor = 1.0 - clamp(maxOutsideDistance / uniform.uFadeDistance, 0.0, 1.0);
+
+    // Apply smooth fade using smoothstep for nicer transition
+    fadeFactor = smoothstep(0.0, 1.0, fadeFactor);
+
+    // Scale the splat based on fade factor
+    *scale = (*scale) * fadeFactor;
+}
+
+fn modifySplatColor(center: vec3f, color: ptr<function, vec4f>) {
+    // No color modification needed
+}
+`;
+
+/**
+ * Fade crop shader effect for gaussian splats.
+ * Applies a smooth fade to splats outside the AABB based on distance.
+ * Splats at the AABB edge are fully visible, and fade to invisible at fadeDistance away.
+ */
+export class GsplatFadeCropShaderEffect extends GsplatShaderEffect {
+  static scriptName = 'gsplatFadeCropShaderEffect';
+  _aabbMinArray = [0, 0, 0];
+  _aabbMaxArray = [0, 0, 0];
+  aabbMin = new Vec3(-0.5, -0.5, -0.5);
+  aabbMax = new Vec3(0.5, 0.5, 0.5);
+  fadeDistance = 0.5;
+  getShaderGLSL() {
+    return shaderGLSL;
+  }
+  getShaderWGSL() {
+    return shaderWGSL;
+  }
+  updateEffect() {
+    this._aabbMinArray[0] = this.aabbMin.x;
+    this._aabbMinArray[1] = this.aabbMin.y;
+    this._aabbMinArray[2] = this.aabbMin.z;
+    this.setUniform('uAabbMin', this._aabbMinArray);
+    this._aabbMaxArray[0] = this.aabbMax.x;
+    this._aabbMaxArray[1] = this.aabbMax.y;
+    this._aabbMaxArray[2] = this.aabbMax.z;
+    this.setUniform('uAabbMax', this._aabbMaxArray);
+    this.setUniform('uFadeDistance', this.fadeDistance);
+  }
+}

package/components/VirtualWalkthrough/walkthrough-camera.d.ts

@@ -0,0 +1,77 @@
+import { Script, Vec3 } from 'playcanvas';
+export declare class WalkthroughCamera extends Script {
+    static scriptName: string;
+    /** @attribute */
+    moveSpeed: number;
+    /** @attribute */
+    moveFastSpeed: number;
+    /** @attribute */
+    moveSlowSpeed: number;
+    /** @attribute */
+    lookSensitivity: number;
+    /** @attribute */
+    rotateDamping: number;
+    /** @attribute */
+    pitchMin: number;
+    /** @attribute */
+    pitchMax: number;
+    /** @attribute */
+    scrollSpeed: number;
+    /** @attribute */
+    boundsCenter: Vec3;
+    /** @attribute */
+    boundsRadius: number;
+    /** @attribute */
+    freeFly: boolean;
+    /** @attribute */
+    enableFly: boolean;
+    /** @attribute */
+    averageCameraHeight: number;
+    /**
+     * Three world-space points defining the ground plane.
+     * When provided, the camera Y position is derived from this plane during non-freeFly movement.
+     *
+     * Not a React prop — must be set directly on the script instance via useEffect. The @playcanvas/react
+     * Script component is wrapped in memo() whose shallowEquals comparator returns early on the first prop
+     * with a .equals() method (Vec3), so any prop listed after boundsCenter is never compared and the
+     * component won't re-render when it changes. Set via:
+     *   app.root.findByName('camera')?.script?.walkthroughCamera.groundPlane = points
+     * Should be updated if shallowEquals is fixed (see https://github.com/playcanvas/react/pull/298)
+     */
+    groundPlane: Vec3[];
+    private _pitch;
+    private _yaw;
+    private _targetPitch;
+    private _targetYaw;
+    private _isDragging;
+    private _lastX;
+    private _lastY;
+    private _scrollDelta;
+    private _keys;
+    private _removeListeners;
+    private _planeNormal;
+    private _planePoint;
+    private _hasGroundPlane;
+    private _syncGroundPlane;
+    initialize(): void;
+    /**
+     * Position the camera at `position` looking toward `focus`.
+     * Compatible with the useCameraPosition hook's reset() call.
+     */
+    reset(focus: Vec3, position: Vec3): void;
+    get currentYaw(): number;
+    get currentPitch(): number;
+    /**
+     * Orbit the camera by `yawDelta` degrees around `boundsCenter`.
+     * Called by AutoRotator
+     */
+    orbitStep(yawDelta: number): void;
+    /**
+     * Returns the point directly in front of the camera.
+     * Compatible with the useCameraPosition hook's focusPoint read.
+     */
+    get focusPoint(): Vec3;
+    update(dt: number): void;
+    destroy(): void;
+}
+//# sourceMappingURL=walkthrough-camera.d.ts.map

package/components/VirtualWalkthrough/walkthrough-camera.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walkthrough-camera.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/walkthrough-camera.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,MAAM,EAAE,IAAI,EAAQ,MAAM,YAAY,CAAC;AA8BtD,qBAAa,iBAAkB,SAAQ,MAAM;IAC3C,MAAM,CAAC,UAAU,SAAuB;IAExC,iBAAiB;IACjB,SAAS,SAAO;IAEhB,iBAAiB;IACjB,aAAa,SAAO;IAEpB,iBAAiB;IACjB,aAAa,SAAQ;IAErB,iBAAiB;IACjB,eAAe,SAAO;IAEtB,iBAAiB;IACjB,aAAa,SAAQ;IAErB,iBAAiB;IACjB,QAAQ,SAAO;IAEf,iBAAiB;IACjB,QAAQ,SAAM;IAEd,iBAAiB;IACjB,WAAW,SAAS;IAEpB,iBAAiB;IACjB,YAAY,OAAqB;IAEjC,iBAAiB;IACjB,YAAY,SAAM;IAElB,iBAAiB;IACjB,OAAO,UAAS;IAEhB,iBAAiB;IACjB,SAAS,UAAQ;IAEjB,iBAAiB;IACjB,mBAAmB,SAAK;IAExB;;;;;;;;;;OAUG;IACH,WAAW,EAAE,IAAI,EAAE,CAAM;IAGzB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,IAAI,CAAK;IAGjB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,KAAK,CAAwC;IACrD,OAAO,CAAC,gBAAgB,CAAsB;IAG9C,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,gBAAgB;IAaxB,UAAU;IAkFV;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI;IAsBjC,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED;;;OAGG;IACH,SAAS,CAAC,QAAQ,EAAE,MAAM;IAsB1B;;;OAGG;IACH,IAAI,UAAU,IAAI,IAAI,CAMrB;IAED,MAAM,CAAC,EAAE,EAAE,MAAM;IA4FjB,OAAO;CAIR"}

package/components/VirtualWalkthrough/walkthrough-camera.js

@@ -0,0 +1,320 @@
+import { Quat, Script, Vec3, math } from 'playcanvas';
+import { computeGroundPlane, yOnPlane } from './groundPlane';
+
+/**
+ * First-person walkthrough camera for Gaussian Splat scenes.
+ *
+ * - Pointer drag (mouse or touch) rotates the camera (pitch + yaw) with damping
+ *   matching PlayCanvas CameraControls' rotateDamping=0.98.
+ * - WASD / arrow keys move along the XZ plane using yaw-only direction, so
+ *   movement is always horizontal regardless of where the camera is pointing.
+ * - Mouse wheel moves forward/backward along the XZ plane.
+ * - Y position is clamped between boundsMin.y and boundsMax.y; set them equal
+ *   to lock vertical position entirely.
+ * - Exposes reset() and focusPoint to stay compatible with useCameraPosition.
+ */
+
+const _quat = new Quat();
+const _flatForward = new Vec3();
+const _flatRight = new Vec3();
+
+/** Frame-rate-independent damping lerp rate — matches PlayCanvas CameraControls. */
+const dampRate = (damping, dt) => 1 - Math.pow(damping, dt * 1000);
+
+/** Below this angular delta (degrees) the damped lerp snaps to its target and stops writing. */
+const ANGLE_EPSILON = 1e-3;
+
+/** Below this positional delta (world units) an idle frame skips the transform write. */
+const POSITION_EPSILON = 1e-5;
+export class WalkthroughCamera extends Script {
+  static scriptName = 'walkthroughCamera';
+
+  /** @attribute */
+  moveSpeed = 0.3;
+
+  /** @attribute */
+  moveFastSpeed = 0.5;
+
+  /** @attribute */
+  moveSlowSpeed = 0.15;
+
+  /** @attribute */
+  lookSensitivity = 0.1;
+
+  /** @attribute */
+  rotateDamping = 0.98;
+
+  /** @attribute */
+  pitchMin = -85;
+
+  /** @attribute */
+  pitchMax = 85;
+
+  /** @attribute */
+  scrollSpeed = 0.001;
+
+  /** @attribute */
+  boundsCenter = new Vec3(0, 0, 0);
+
+  /** @attribute */
+  boundsRadius = 10;
+
+  /** @attribute */
+  freeFly = false;
+
+  /** @attribute */
+  enableFly = true;
+
+  /** @attribute */
+  averageCameraHeight = 0;
+
+  /**
+   * Three world-space points defining the ground plane.
+   * When provided, the camera Y position is derived from this plane during non-freeFly movement.
+   *
+   * Not a React prop — must be set directly on the script instance via useEffect. The @playcanvas/react
+   * Script component is wrapped in memo() whose shallowEquals comparator returns early on the first prop
+   * with a .equals() method (Vec3), so any prop listed after boundsCenter is never compared and the
+   * component won't re-render when it changes. Set via:
+   *   app.root.findByName('camera')?.script?.walkthroughCamera.groundPlane = points
+   * Should be updated if shallowEquals is fixed (see https://github.com/playcanvas/react/pull/298)
+   */
+  groundPlane = [];
+
+  // Current (damped) angles applied to the entity each frame.
+  _pitch = 0;
+  _yaw = 0;
+
+  // Target angles — updated immediately on pointer move, entity lerps toward them.
+  _targetPitch = 0;
+  _targetYaw = 0;
+  _isDragging = false;
+  _lastX = 0;
+  _lastY = 0;
+  _scrollDelta = 0;
+  _keys = {};
+  _removeListeners = [];
+
+  // Cached plane derived from groundPlane attribute. Computed once when 3 points become available.
+  _planeNormal = new Vec3(0, 1, 0);
+  _planePoint = new Vec3(0, 0, 0);
+  _hasGroundPlane = false;
+  _syncGroundPlane() {
+    if (this._hasGroundPlane || this.groundPlane.length < 3) {
+      return;
+    }
+    const plane = computeGroundPlane(this.groundPlane);
+    if (!plane) {
+      return;
+    }
+    this._planeNormal.copy(plane.normal);
+    this._planePoint.copy(plane.point);
+    this._hasGroundPlane = true;
+  }
+  initialize() {
+    // Start horizontal; reset() will set the correct pose once splat data loads.
+    this._pitch = 0;
+    this._yaw = 0;
+    this._targetPitch = 0;
+    this._targetYaw = 0;
+    const canvas = this.app.graphicsDevice.canvas;
+    const onPointerDown = e => {
+      this._isDragging = true;
+      this._lastX = e.clientX;
+      this._lastY = e.clientY;
+      try {
+        canvas.setPointerCapture(e.pointerId);
+      } catch {
+        // ignore — canvas may not be focusable yet
+      }
+    };
+    const onPointerMove = e => {
+      if (!this._isDragging) {
+        return;
+      }
+      const dx = e.clientX - this._lastX;
+      const dy = e.clientY - this._lastY;
+      this._lastX = e.clientX;
+      this._lastY = e.clientY;
+      this._targetYaw -= dx * this.lookSensitivity;
+      this._targetPitch = math.clamp(this._targetPitch - dy * this.lookSensitivity, this.pitchMin, this.pitchMax);
+    };
+    const onPointerUp = e => {
+      this._isDragging = false;
+      try {
+        canvas.releasePointerCapture(e.pointerId);
+      } catch {
+        // ignore
+      }
+    };
+    const onWheel = e => {
+      e.preventDefault();
+      this._scrollDelta += e.deltaY;
+    };
+    const onContextMenu = e => e.preventDefault();
+    const onKeyDown = e => {
+      this._keys[e.code] = true;
+    };
+    const onKeyUp = e => {
+      this._keys[e.code] = false;
+    };
+    const onBlur = () => {
+      this._keys = {};
+      this._isDragging = false;
+    };
+    canvas.addEventListener('pointerdown', onPointerDown);
+    canvas.addEventListener('pointermove', onPointerMove);
+    canvas.addEventListener('pointerup', onPointerUp);
+    canvas.addEventListener('pointercancel', onPointerUp);
+    canvas.addEventListener('wheel', onWheel, {
+      passive: false
+    });
+    canvas.addEventListener('contextmenu', onContextMenu);
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    window.addEventListener('blur', onBlur);
+    this._removeListeners = [() => canvas.removeEventListener('pointerdown', onPointerDown), () => canvas.removeEventListener('pointermove', onPointerMove), () => canvas.removeEventListener('pointerup', onPointerUp), () => canvas.removeEventListener('pointercancel', onPointerUp), () => canvas.removeEventListener('wheel', onWheel), () => canvas.removeEventListener('contextmenu', onContextMenu), () => window.removeEventListener('keydown', onKeyDown), () => window.removeEventListener('keyup', onKeyUp), () => window.removeEventListener('blur', onBlur)];
+  }
+
+  /**
+   * Position the camera at `position` looking toward `focus`.
+   * Compatible with the useCameraPosition hook's reset() call.
+   */
+  reset(focus, position) {
+    this.entity.setPosition(position);
+    const dx = focus.x - position.x;
+    const dy = focus.y - position.y;
+    const dz = focus.z - position.z;
+    const len = Math.sqrt(dx * dx + dy * dy + dz * dz);
+    if (len > 0) {
+      // PlayCanvas uses right-handed CCW Y rotation: forward = (-sinθ, 0, -cosθ),
+      // so to look toward (dx, 0, dz): θ = atan2(-dx, -dz).
+      this._yaw = Math.atan2(-dx, -dz) * (180 / Math.PI);
+      this._pitch = Math.atan2(-dy, Math.sqrt(dx * dx + dz * dz)) * (180 / Math.PI);
+      this._pitch = math.clamp(this._pitch, this.pitchMin, this.pitchMax);
+    }
+
+    // Snap targets so there's no damped drift from the previous pose.
+    this._targetPitch = this._pitch;
+    this._targetYaw = this._yaw;
+    this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+  }
+  get currentYaw() {
+    return this._targetYaw;
+  }
+  get currentPitch() {
+    return this._targetPitch;
+  }
+
+  /**
+   * Orbit the camera by `yawDelta` degrees around `boundsCenter`.
+   * Called by AutoRotator
+   */
+  orbitStep(yawDelta) {
+    this._syncGroundPlane();
+    const pos = this.entity.getPosition();
+    const dx = pos.x - this.boundsCenter.x;
+    const dz = pos.z - this.boundsCenter.z;
+    const radius = Math.sqrt(dx * dx + dz * dz) || this.boundsRadius * 0.5;
+    const currentAngle = Math.atan2(dz, dx);
+    const newAngle = currentAngle + yawDelta * Math.PI / 180;
+    const nx = this.boundsCenter.x + radius * Math.cos(newAngle);
+    const nz = this.boundsCenter.z + radius * Math.sin(newAngle);
+    const ny = this._hasGroundPlane ? yOnPlane(nx, nz, this._planeNormal, this._planePoint, this.boundsCenter.y) + this.averageCameraHeight : this.boundsCenter.y;
+    this.entity.setPosition(nx, ny, nz);
+    const faceDx = this.boundsCenter.x - nx;
+    const faceDz = this.boundsCenter.z - nz;
+    this._yaw = Math.atan2(-faceDx, -faceDz) * (180 / Math.PI);
+    this._targetYaw = this._yaw;
+    this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+  }
+
+  /**
+   * Returns the point directly in front of the camera.
+   * Compatible with the useCameraPosition hook's focusPoint read.
+   */
+  get focusPoint() {
+    const pos = this.entity.getPosition();
+    _quat.setFromEulerAngles(this._pitch, this._yaw, 0);
+    _quat.transformVector(Vec3.FORWARD, _flatForward);
+    return new Vec3(pos.x + _flatForward.x, pos.y + _flatForward.y, pos.z + _flatForward.z);
+  }
+  update(dt) {
+    this._syncGroundPlane();
+
+    // Lerp current angles toward targets using the same damping as CameraControls.
+    // Snap to the target once within ANGLE_EPSILON so the asymptotic lerp actually
+    // settles instead of emitting ever-smaller micro-rotations for ~0.4s after each
+    // drag. The gsplat sorter guards its own re-sorts with an epsilon, so this mainly
+    // trims that sort tail; it does not affect per-frame rendering (autoRender does).
+    const r = dampRate(this.rotateDamping, dt);
+    let nextPitch = this._pitch + (this._targetPitch - this._pitch) * r;
+    let nextYaw = this._yaw + (this._targetYaw - this._yaw) * r;
+    if (Math.abs(this._targetPitch - nextPitch) < ANGLE_EPSILON) {
+      nextPitch = this._targetPitch;
+    }
+    if (Math.abs(this._targetYaw - nextYaw) < ANGLE_EPSILON) {
+      nextYaw = this._targetYaw;
+    }
+    nextPitch = math.clamp(nextPitch, this.pitchMin, this.pitchMax);
+
+    // Only write the rotation when it actually changed, to avoid needlessly dirtying
+    // the scene node once the angles have settled.
+    const anglesChanged = nextPitch !== this._pitch || nextYaw !== this._yaw;
+    this._pitch = nextPitch;
+    this._yaw = nextYaw;
+    if (anglesChanged) {
+      this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+    }
+    const pos = this.entity.getPosition();
+    let nx = pos.x;
+    let ny = pos.y;
+    let nz = pos.z;
+    if (this.enableFly) {
+      const fast = this._keys.ShiftLeft || this._keys.ShiftRight;
+      const slow = this._keys.ControlLeft || this._keys.ControlRight;
+      const speed = (fast ? this.moveFastSpeed : slow ? this.moveSlowSpeed : this.moveSpeed) * dt;
+      const fwd = (this._keys.KeyW || this._keys.ArrowUp ? 1 : 0) - (this._keys.KeyS || this._keys.ArrowDown ? 1 : 0);
+      const strafe = (this._keys.KeyD || this._keys.ArrowRight ? 1 : 0) - (this._keys.KeyA || this._keys.ArrowLeft ? 1 : 0);
+      const scrollFwd = -this._scrollDelta * this.scrollSpeed;
+      if (fwd !== 0 || strafe !== 0 || scrollFwd !== 0) {
+        // Use yaw-only rotation so movement is always horizontal.
+        _quat.setFromEulerAngles(0, this._yaw, 0);
+        _quat.transformVector(Vec3.FORWARD, _flatForward);
+        _quat.transformVector(Vec3.RIGHT, _flatRight);
+        nx += _flatForward.x * (fwd * speed + scrollFwd) + _flatRight.x * strafe * speed;
+        nz += _flatForward.z * (fwd * speed + scrollFwd) + _flatRight.z * strafe * speed;
+      }
+      if (this.freeFly) {
+        const up = (this._keys.KeyE ? 1 : 0) - (this._keys.KeyQ ? 1 : 0);
+        if (up !== 0) {
+          ny += up * speed;
+        }
+      }
+    }
+    this._scrollDelta = 0;
+    if (!this.freeFly) {
+      // Circular XZ clamp: project back onto the circle edge if outside.
+      const cdx = nx - this.boundsCenter.x;
+      const cdz = nz - this.boundsCenter.z;
+      const dist = Math.sqrt(cdx * cdx + cdz * cdz);
+      if (dist > this.boundsRadius) {
+        const scale = this.boundsRadius / dist;
+        nx = this.boundsCenter.x + cdx * scale;
+        nz = this.boundsCenter.z + cdz * scale;
+      }
+    }
+    const groundY = this._hasGroundPlane ? yOnPlane(nx, nz, this._planeNormal, this._planePoint, this.boundsCenter.y) + this.averageCameraHeight : this.boundsCenter.y;
+    const targetY = this.freeFly ? ny : groundY;
+    // Only write the position when it actually moved. This keeps the scene node clean on
+    // idle frames; note it does not stop per-frame rasterization — while autoRender is on
+    // the app renders every frame regardless of whether the transform changed.
+    if (Math.abs(nx - pos.x) > POSITION_EPSILON || Math.abs(targetY - pos.y) > POSITION_EPSILON || Math.abs(nz - pos.z) > POSITION_EPSILON) {
+      this.entity.setPosition(nx, targetY, nz);
+    }
+  }
+  destroy() {
+    this._removeListeners.forEach(fn => fn());
+    this._removeListeners = [];
+  }
+}

package/components/svg/BlobbyGrayIconImage.js

@@ -1,42 +1,37 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgBlobbyGrayIconImage = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 200 128",
+  "aria-labelledby": titleId,
+  ...props,
+  children: [title ? /*#__PURE__*/_jsx("title", {
+    id: titleId,
+    children: title
+  }) : null, /*#__PURE__*/_jsxs("g", {
+    clipPath: "url(#blobby-gray-icon-image_svg__a)",
+    children: [/*#__PURE__*/_jsx("path", {
+      fill: "#F1F0EC",
+      fillRule: "evenodd",
+      d: "M113.962 6.222c26.535 2.074 38.447 30.862 44.693 56.735 4.621 19.146-2.901 38.537-18.932 49.978-15.595 11.131-35.55 10.486-51.986.639C63.732 99.19 34.311 80.943 40.954 53.757c7.619-31.19 41-50.037 73.009-47.535",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      fill: "#7F775B",
+      d: "M83.333 40C79.307 40 76 43.307 76 47.333v33.334C76 84.693 79.307 88 83.333 88h33.334c4.026 0 7.333-3.307 7.333-7.333V47.333c0-4.026-3.307-7.333-7.333-7.333zm0 4h33.334A3.304 3.304 0 0 1 120 47.333v27.274l-8.016-7.755-.002-.003a5.4 5.4 0 0 0-3.75-1.516 5.4 5.4 0 0 0-3.75 1.519l-2.732 2.643-8.24-7.972A5.4 5.4 0 0 0 89.758 60a5.4 5.4 0 0 0-3.75 1.52l-.003.003L80 67.333v-20A3.304 3.304 0 0 1 83.333 44m25.334 5.333c-1.834 0-3.462.76-4.495 1.922-1.033 1.163-1.505 2.634-1.505 4.078s.472 2.916 1.505 4.078 2.661 1.922 4.495 1.922c1.833 0 3.461-.76 4.494-1.922 1.034-1.162 1.506-2.633 1.506-4.078 0-1.444-.472-2.915-1.506-4.078-1.033-1.162-2.661-1.922-4.494-1.922m0 4c.833 0 1.205.24 1.505.578s.495.867.495 1.422c0 .556-.195 1.085-.495 1.422-.3.338-.672.578-1.505.578-.834 0-1.205-.24-1.506-.578s-.494-.866-.494-1.422.194-1.084.494-1.422c.301-.337.672-.578 1.506-.578M89.757 64a1.37 1.37 0 0 1 .972.398l8.143 7.878L86.752 84h-3.419A3.304 3.304 0 0 1 80 80.667v-7.769l8.787-8.5c.283-.274.626-.398.97-.398m18.475 5.333c.353 0 .691.123.971.394L120 80.172v.495A3.304 3.304 0 0 1 116.667 84h-24.16l14.756-14.273c.277-.268.618-.394.969-.394"
+    })]
+  }), /*#__PURE__*/_jsx("defs", {
+    children: /*#__PURE__*/_jsx("clipPath", {
+      id: "blobby-gray-icon-image_svg__a",
+      children: /*#__PURE__*/_jsx("path", {
+        fill: "#fff",
+        d: "M0 0h200v128H0z"
+      })
+    })
+  })]
 });
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
-const _excluded = ["title", "titleId"];
-const SvgBlobbyGrayIconImage = _ref => {
-  let {
-      title,
-      titleId
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 200 128",
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#blobby-gray-icon-image_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#F1F0EC",
-    fillRule: "evenodd",
-    d: "M113.962 6.222c26.535 2.074 38.447 30.862 44.693 56.735 4.621 19.146-2.901 38.537-18.932 49.978-15.595 11.131-35.55 10.486-51.986.639C63.732 99.19 34.311 80.943 40.954 53.757c7.619-31.19 41-50.037 73.009-47.535",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#7F775B",
-    d: "M83.333 40C79.307 40 76 43.307 76 47.333v33.334C76 84.693 79.307 88 83.333 88h33.334c4.026 0 7.333-3.307 7.333-7.333V47.333c0-4.026-3.307-7.333-7.333-7.333zm0 4h33.334A3.304 3.304 0 0 1 120 47.333v27.274l-8.016-7.755-.002-.003a5.4 5.4 0 0 0-3.75-1.516 5.4 5.4 0 0 0-3.75 1.519l-2.732 2.643-8.24-7.972A5.4 5.4 0 0 0 89.758 60a5.4 5.4 0 0 0-3.75 1.52l-.003.003L80 67.333v-20A3.304 3.304 0 0 1 83.333 44m25.334 5.333c-1.834 0-3.462.76-4.495 1.922-1.033 1.163-1.505 2.634-1.505 4.078s.472 2.916 1.505 4.078 2.661 1.922 4.495 1.922c1.833 0 3.461-.76 4.494-1.922 1.034-1.162 1.506-2.633 1.506-4.078 0-1.444-.472-2.915-1.506-4.078-1.033-1.162-2.661-1.922-4.494-1.922m0 4c.833 0 1.205.24 1.505.578s.495.867.495 1.422c0 .556-.195 1.085-.495 1.422-.3.338-.672.578-1.505.578-.834 0-1.205-.24-1.506-.578s-.494-.866-.494-1.422.194-1.084.494-1.422c.301-.337.672-.578 1.506-.578M89.757 64a1.37 1.37 0 0 1 .972.398l8.143 7.878L86.752 84h-3.419A3.304 3.304 0 0 1 80 80.667v-7.769l8.787-8.5c.283-.274.626-.398.97-.398m18.475 5.333c.353 0 .691.123.971.394L120 80.172v.495A3.304 3.304 0 0 1 116.667 84h-24.16l14.756-14.273c.277-.268.618-.394.969-.394"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "blobby-gray-icon-image_svg__a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h200v128H0z"
-  }))));
-};
-var _default = exports.default = SvgBlobbyGrayIconImage;
+export default SvgBlobbyGrayIconImage;