@heliguy-xyz/splat-viewer 1.0.0-rc.24 → 1.0.0-rc.25

package/dist/web-component/splat-viewer.js

@@ -105235,14 +105235,24 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    activateFlyMode() {
 	        if (!this.fly)
 	            return;
-	        if (typeof this.fly.activate === 'function')
-	            this.fly.activate();
-	        // Align fly camera internal orientation with the current camera rotation so that
-	        // switching from orbit -> fly does not snap the view back to the initial direction.
+	        // Preserve camera position and rotation when switching to fly mode
 	        try {
+	            // Preserve position
+	            const pos = this.camera.getPosition
+	                ? this.camera.getPosition().clone()
+	                : this.camera.getLocalPosition
+	                    ? this.camera.getLocalPosition().clone()
+	                    : null;
+	            if (pos && this.camera.setPosition) {
+	                ;
+	                this.camera.setPosition(pos);
+	            }
+	            // Preserve rotation (convert Euler to pitch/yaw)
 	            const euler = this.camera.getEulerAngles
 	                ? this.camera.getEulerAngles()
-	                : null;
+	                : this.camera.getLocalEulerAngles
+	                    ? this.camera.getLocalEulerAngles()
+	                    : null;
 	            if (euler) {
 	                // These properties are part of the FlyCamera runtime state
 	                ;
@@ -105253,6 +105263,8 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        catch {
 	            // Best-effort sync; ignore if camera or script API differs
 	        }
+	        if (typeof this.fly.activate === 'function')
+	            this.fly.activate();
 	    }
 	    deactivateFlyMode() {
 	        if (!this.fly)
@@ -105262,6 +105274,373 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    }
 	}
 
+	/**
+	 * Fly camera controller for environments where PlayCanvas ScriptComponentSystem is not available
+	 * (e.g. supersplat-core's custom PCApp, which omits ScriptComponentSystem).
+	 *
+	 * This controller attaches DOM input listeners and updates the camera entity via `app.on('update')`.
+	 */
+	class FlyCameraController {
+	    constructor(app, entity, emitFlyEvent, config) {
+	        // Config
+	        this.moveSpeed = 5.0;
+	        this.fastSpeedMultiplier = 3.0;
+	        this.slowSpeedMultiplier = 0.3;
+	        this.lookSensitivity = 0.2;
+	        this.invertY = false;
+	        this.keyBindings = {
+	            forward: 'KeyW',
+	            backward: 'KeyS',
+	            left: 'KeyA',
+	            right: 'KeyD',
+	            up: 'KeyE',
+	            down: 'KeyQ',
+	            fastMove: 'ShiftLeft',
+	            slowMove: 'ControlLeft',
+	        };
+	        this.smoothing = 0.8;
+	        this.friction = 0.85;
+	        this.enableCollision = false;
+	        this.minHeight = null;
+	        this.maxHeight = null;
+	        this._isActive = true;
+	        this._isPointerLocked = false;
+	        this._isLooking = false;
+	        this._pressed = new Set();
+	        this._velocity = new Vec3(0, 0, 0);
+	        this._targetVelocity = new Vec3(0, 0, 0);
+	        this._pitch = 0;
+	        this._yaw = 0;
+	        this._lastMoveEmitTime = 0;
+	        this._lastLookEmitTime = 0;
+	        this._updateHandler = null;
+	        this.app = app;
+	        this.entity = entity;
+	        this.emitFlyEvent = emitFlyEvent;
+	        if (config) {
+	            this.setConfig(config);
+	        }
+	        // Sync initial yaw/pitch from entity orientation if available
+	        try {
+	            const euler = this.entity?.getEulerAngles?.();
+	            if (euler) {
+	                this._pitch = euler.x || 0;
+	                this._yaw = euler.y || 0;
+	            }
+	        }
+	        catch {
+	            // ignore
+	        }
+	        this._bindInputListeners();
+	    }
+	    _bindInputListeners() {
+	        // Keyboard (capture phase so we see keys even when other handlers run)
+	        this._onKeyDown = this._handleKeyDown.bind(this);
+	        this._onKeyUp = this._handleKeyUp.bind(this);
+	        document.addEventListener('keydown', this._onKeyDown, true);
+	        document.addEventListener('keyup', this._onKeyUp, true);
+	        // Look: pointer events primary, mouse fallback
+	        this._onMouseMove = this._handleMouseMove.bind(this);
+	        this._onPointerMove = this._handlePointerMove.bind(this);
+	        document.addEventListener('mousemove', this._onMouseMove);
+	        document.addEventListener('pointermove', this._onPointerMove, true);
+	        const canvas = this.app?.graphicsDevice?.canvas;
+	        this._onMouseDown = (e) => {
+	            if (e.button === 0 && this._isActive)
+	                this._isLooking = true;
+	        };
+	        this._onPointerDown = (e) => {
+	            if (e.button === 0 && this._isActive) {
+	                this._isLooking = true;
+	            }
+	        };
+	        canvas?.addEventListener('mousedown', this._onMouseDown, true);
+	        canvas?.addEventListener('pointerdown', this._onPointerDown, true);
+	        this._onMouseUp = (e) => {
+	            if (e.button === 0)
+	                this._isLooking = false;
+	        };
+	        this._onPointerUp = (e) => {
+	            if (e.button === 0) {
+	                this._isLooking = false;
+	            }
+	        };
+	        document.addEventListener('mouseup', this._onMouseUp, true);
+	        document.addEventListener('pointerup', this._onPointerUp, true);
+	    }
+	    _unbindInputListeners() {
+	        document.removeEventListener('keydown', this._onKeyDown, true);
+	        document.removeEventListener('keyup', this._onKeyUp, true);
+	        document.removeEventListener('mousemove', this._onMouseMove);
+	        document.removeEventListener('pointermove', this._onPointerMove, true);
+	        document.removeEventListener('mouseup', this._onMouseUp, true);
+	        document.removeEventListener('pointerup', this._onPointerUp, true);
+	        const canvas = this.app?.graphicsDevice?.canvas;
+	        if (canvas && this._onMouseDown) {
+	            canvas.removeEventListener('mousedown', this._onMouseDown, true);
+	        }
+	        if (canvas && this._onPointerDown) {
+	            canvas.removeEventListener('pointerdown', this._onPointerDown, true);
+	        }
+	    }
+	    /**
+	     * Sync position and rotation from the camera entity.
+	     * Called when switching from orbit to fly mode to preserve camera state.
+	     */
+	    syncFromEntity() {
+	        try {
+	            // Preserve position
+	            const pos = this.entity?.getPosition?.() || this.entity?.getLocalPosition?.();
+	            if (pos) {
+	                const posVec = pos.clone ? pos.clone() : new Vec3(pos.x || 0, pos.y || 0, pos.z || 0);
+	                this.entity?.setPosition?.(posVec);
+	                this.entity?.setLocalPosition?.(posVec);
+	            }
+	            // Preserve rotation (convert Euler to pitch/yaw)
+	            const euler = this.entity?.getEulerAngles?.() || this.entity?.getLocalEulerAngles?.();
+	            if (euler) {
+	                // PlayCanvas Euler: x=pitch, y=yaw, z=roll
+	                this._pitch = euler.x || 0;
+	                this._yaw = euler.y || 0;
+	                // Apply rotation immediately so view doesn't snap
+	                if (this.entity?.setLocalEulerAngles) {
+	                    this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);
+	                }
+	                else if (this.entity?.setEulerAngles) {
+	                    this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+	                }
+	            }
+	        }
+	        catch {
+	            // ignore
+	        }
+	    }
+	    activate() {
+	        if (this._isActive)
+	            return;
+	        this._isActive = true;
+	        // Sync position and rotation from current camera state before activating
+	        this.syncFromEntity();
+	        if (!this._updateHandler) {
+	            this._updateHandler = (dt) => this.update(dt);
+	            this.app?.on?.('update', this._updateHandler);
+	        }
+	    }
+	    deactivate() {
+	        if (!this._isActive)
+	            return;
+	        this._isActive = false;
+	        this._isLooking = false;
+	        this._pressed.clear();
+	        if (this._updateHandler) {
+	            try {
+	                this.app?.off?.('update', this._updateHandler);
+	            }
+	            catch {
+	                // ignore
+	            }
+	            this._updateHandler = null;
+	        }
+	    }
+	    destroy() {
+	        try {
+	            this.deactivate();
+	        }
+	        finally {
+	            this._unbindInputListeners();
+	        }
+	    }
+	    setConfig(config) {
+	        if (config.moveSpeed !== undefined)
+	            this.moveSpeed = config.moveSpeed;
+	        if (config.fastSpeedMultiplier !== undefined)
+	            this.fastSpeedMultiplier = config.fastSpeedMultiplier;
+	        if (config.slowSpeedMultiplier !== undefined)
+	            this.slowSpeedMultiplier = config.slowSpeedMultiplier;
+	        if (config.lookSensitivity !== undefined)
+	            this.lookSensitivity = config.lookSensitivity;
+	        if (config.invertY !== undefined)
+	            this.invertY = config.invertY;
+	        if (config.keyBindings !== undefined)
+	            this.keyBindings = config.keyBindings;
+	        if (config.smoothing !== undefined)
+	            this.smoothing = config.smoothing;
+	        if (config.friction !== undefined)
+	            this.friction = config.friction;
+	        if (config.enableCollision !== undefined)
+	            this.enableCollision = config.enableCollision;
+	        if (config.minHeight !== undefined)
+	            this.minHeight = config.minHeight;
+	        if (config.maxHeight !== undefined)
+	            this.maxHeight = config.maxHeight;
+	    }
+	    getState() {
+	        const pos = this.entity?.getPosition?.();
+	        return {
+	            position: { x: pos?.x ?? 0, y: pos?.y ?? 0, z: pos?.z ?? 0 },
+	            rotation: { pitch: this._pitch, yaw: this._yaw },
+	            velocity: { x: this._velocity.x, y: this._velocity.y, z: this._velocity.z },
+	            isMoving: Math.abs(this._velocity.x) +
+	                Math.abs(this._velocity.y) +
+	                Math.abs(this._velocity.z) >
+	                1e-4,
+	        };
+	    }
+	    _handleKeyDown(e) {
+	        const keys = [];
+	        if (e.code)
+	            keys.push(e.code);
+	        if (e.key) {
+	            keys.push(e.key);
+	            if (e.key.length === 1) {
+	                keys.push(`Key${e.key.toUpperCase()}`);
+	                keys.push(e.key.toUpperCase());
+	                keys.push(e.key.toLowerCase());
+	            }
+	        }
+	        for (const k of keys)
+	            this._pressed.add(k);
+	    }
+	    _handleKeyUp(e) {
+	        const keys = [];
+	        if (e.code)
+	            keys.push(e.code);
+	        if (e.key) {
+	            keys.push(e.key);
+	            if (e.key.length === 1) {
+	                keys.push(`Key${e.key.toUpperCase()}`);
+	                keys.push(e.key.toUpperCase());
+	                keys.push(e.key.toLowerCase());
+	            }
+	        }
+	        for (const k of keys)
+	            this._pressed.delete(k);
+	    }
+	    _handleMouseMove(e) {
+	        if (!this._isLooking || !this._isActive)
+	            return;
+	        const dx = e.movementX * this.lookSensitivity;
+	        const dy = e.movementY * this.lookSensitivity * (this.invertY ? 1 : -1);
+	        this._yaw = (this._yaw - dx) % 360;
+	        this._pitch = Math.max(-89, Math.min(89, this._pitch + dy));
+	    }
+	    _handlePointerMove(e) {
+	        if (!this._isLooking || !this._isActive)
+	            return;
+	        const dx = (e.movementX || 0) * this.lookSensitivity;
+	        const dy = (e.movementY || 0) * this.lookSensitivity * (this.invertY ? 1 : -1);
+	        this._yaw = (this._yaw - dx) % 360;
+	        this._pitch = Math.max(-89, Math.min(89, this._pitch + dy));
+	    }
+	    _getEffectiveSpeed() {
+	        const fast = this._pressed.has(this.keyBindings.fastMove);
+	        const slow = this._pressed.has(this.keyBindings.slowMove);
+	        let s = this.moveSpeed;
+	        if (fast)
+	            s *= this.fastSpeedMultiplier;
+	        if (slow)
+	            s *= this.slowSpeedMultiplier;
+	        return s;
+	    }
+	    _updateVelocity() {
+	        const kb = this.keyBindings;
+	        const isPressed = (binding, fallbacks) => {
+	            const all = [binding, ...fallbacks].filter(Boolean);
+	            return all.some(k => this._pressed.has(k));
+	        };
+	        const forward = isPressed(kb.forward, ['KeyW', 'w', 'W']) ? 1 : 0;
+	        const backward = isPressed(kb.backward, ['KeyS', 's', 'S']) ? 1 : 0;
+	        const left = isPressed(kb.left, ['KeyA', 'a', 'A']) ? 1 : 0;
+	        const right = isPressed(kb.right, ['KeyD', 'd', 'D']) ? 1 : 0;
+	        const up = isPressed(kb.up, ['KeyE', 'e', 'E']) ? 1 : 0;
+	        const down = isPressed(kb.down, ['KeyQ', 'q', 'Q']) ? 1 : 0;
+	        const inputZ = forward - backward;
+	        const inputX = right - left;
+	        const inputY = up - down;
+	        const planarLen = Math.hypot(inputX, inputZ);
+	        const nx = planarLen > 0 ? inputX / planarLen : 0;
+	        const nz = planarLen > 0 ? inputZ / planarLen : 0;
+	        const speed = this._getEffectiveSpeed() * 2;
+	        const entity = this.entity;
+	        const fwd = entity?.forward && entity.forward.clone
+	            ? entity.forward.clone()
+	            : entity?.forward
+	                ? new Vec3(entity.forward.x, entity.forward.y, entity.forward.z)
+	                : new Vec3(0, 0, -1);
+	        const rightVec = entity?.right && entity.right.clone
+	            ? entity.right.clone()
+	            : entity?.right
+	                ? new Vec3(entity.right.x, entity.right.y, entity.right.z)
+	                : new Vec3(1, 0, 0);
+	        const upVec = entity?.up && entity.up.clone
+	            ? entity.up.clone()
+	            : entity?.up
+	                ? new Vec3(entity.up.x, entity.up.y, entity.up.z)
+	                : Vec3.UP.clone();
+	        const target = new Vec3(0, 0, 0);
+	        target.add(fwd.mulScalar(nz * speed));
+	        target.add(rightVec.mulScalar(nx * speed));
+	        target.add(upVec.mulScalar(inputY * speed));
+	        this._targetVelocity.copy(target);
+	        this._velocity.lerp(this._velocity, this._targetVelocity, Math.min(1, this.smoothing));
+	        if (nx === 0 && nz === 0 && inputY === 0) {
+	            this._velocity.mulScalar(this.friction);
+	            if (this._velocity.length() < 0.0001)
+	                this._velocity.set(0, 0, 0);
+	        }
+	    }
+	    _applyMovement(dt) {
+	        if (this._velocity.length() === 0)
+	            return;
+	        const pos = this.entity?.getPosition?.()?.clone?.() ?? new Vec3(0, 0, 0);
+	        pos.add(this._velocity.clone().mulScalar(dt));
+	        this.entity?.setPosition?.(pos);
+	    }
+	    _applyRotation() {
+	        if (this.entity?.setLocalEulerAngles) {
+	            this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);
+	        }
+	        else if (this.entity?.setEulerAngles) {
+	            this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+	        }
+	    }
+	    _applyConstraints() {
+	        if (!this.enableCollision &&
+	            this.minHeight == null &&
+	            this.maxHeight == null) {
+	            return;
+	        }
+	        const pos = this.entity?.getPosition?.()?.clone?.() ?? new Vec3(0, 0, 0);
+	        if (this.minHeight != null)
+	            pos.y = Math.max(pos.y, this.minHeight);
+	        if (this.maxHeight != null)
+	            pos.y = Math.min(pos.y, this.maxHeight);
+	        this.entity?.setPosition?.(pos);
+	    }
+	    update(dt) {
+	        if (!this._isActive)
+	            return;
+	        this._updateVelocity();
+	        this._applyMovement(dt);
+	        this._applyRotation();
+	        this._applyConstraints();
+	        // Emit throttled movement/look events (100ms)
+	        const now = performance.now();
+	        if (!this._lastMoveEmitTime || now - this._lastMoveEmitTime >= 100) {
+	            const pos = this.entity?.getPosition?.();
+	            this.emitFlyEvent?.('fly-camera-move', {
+	                position: { x: pos?.x ?? 0, y: pos?.y ?? 0, z: pos?.z ?? 0 },
+	                velocity: { x: this._velocity.x, y: this._velocity.y, z: this._velocity.z },
+	            });
+	            this._lastMoveEmitTime = now;
+	        }
+	        if (!this._lastLookEmitTime || now - this._lastLookEmitTime >= 100) {
+	            this.emitFlyEvent?.('fly-camera-look', { pitch: this._pitch, yaw: this._yaw });
+	            this._lastLookEmitTime = now;
+	        }
+	    }
+	}
+
 	// FlyCamera PlayCanvas script: first-person WASD movement with mouse-look
 	function registerFlyCameraScript() {
 	    if (typeof pc === 'undefined') {
@@ -105347,10 +105726,18 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        this._onKeyUp = this._handleKeyUp.bind(this);
 	        document.addEventListener('keydown', this._onKeyDown, true);
 	        document.addEventListener('keyup', this._onKeyUp, true);
-	        // Mouse move for look (while mouse button held)
+	        // Mouse/pointer move for look (while primary button held).
+	        //
+	        // Important: SuperSplat camera controls are pointer-event based and may call
+	        // preventDefault() on pointer events. When that happens, browsers often
+	        // suppress the corresponding legacy mouse events (mousedown/mousemove).
+	        // So we listen to *pointer* events as the primary path, with mouse as a
+	        // fallback for older environments.
 	        this._onMouseMove = this._handleMouseMove.bind(this);
+	        this._onPointerMove = this._handlePointerMove.bind(this);
 	        document.addEventListener('mousemove', this._onMouseMove);
-	        // Mouse button handling: click + hold to look, release to stop
+	        document.addEventListener('pointermove', this._onPointerMove, true);
+	        // Button handling: click + hold to look, release to stop
 	        const canvas = this.app.graphicsDevice.canvas;
 	        this._onClickToLock = (e) => {
 	            // Left button enables look while held (no pointer lock)
@@ -105358,13 +105745,17 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                this._isLooking = true;
 	            }
 	        };
-	        canvas.addEventListener('mousedown', this._onClickToLock);
+	        canvas.addEventListener('mousedown', this._onClickToLock, true);
+	        this._onPointerDownToLook = this._handlePointerDown.bind(this);
+	        canvas.addEventListener('pointerdown', this._onPointerDownToLook, true);
 	        this._onMouseUp = (e) => {
 	            if (e.button === 0) {
 	                this._isLooking = false;
 	            }
 	        };
-	        document.addEventListener('mouseup', this._onMouseUp);
+	        document.addEventListener('mouseup', this._onMouseUp, true);
+	        this._onPointerUp = this._handlePointerUp.bind(this);
+	        document.addEventListener('pointerup', this._onPointerUp, true);
 	    };
 	    FlyCamera.prototype.update = function (dt) {
 	        if (!this._isActive)
@@ -105460,9 +105851,11 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        this._onKeyDown = this._onKeyDown || this._handleKeyDown.bind(this);
 	        this._onKeyUp = this._onKeyUp || this._handleKeyUp.bind(this);
 	        this._onMouseMove = this._onMouseMove || this._handleMouseMove.bind(this);
+	        this._onPointerMove = this._onPointerMove || this._handlePointerMove.bind(this);
 	        document.addEventListener('keydown', this._onKeyDown, true);
 	        document.addEventListener('keyup', this._onKeyUp, true);
 	        document.addEventListener('mousemove', this._onMouseMove);
+	        document.addEventListener('pointermove', this._onPointerMove, true);
 	        const canvas = this.app.graphicsDevice.canvas;
 	        this._onClickToLock =
 	            this._onClickToLock ||
@@ -105471,7 +105864,10 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                        this._isLooking = true;
 	                    }
 	                });
-	        canvas.addEventListener('mousedown', this._onClickToLock);
+	        canvas.addEventListener('mousedown', this._onClickToLock, true);
+	        this._onPointerDownToLook =
+	            this._onPointerDownToLook || this._handlePointerDown.bind(this);
+	        canvas.addEventListener('pointerdown', this._onPointerDownToLook, true);
 	        this._onMouseUp =
 	            this._onMouseUp ||
 	                ((e) => {
@@ -105479,22 +105875,36 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                        this._isLooking = false;
 	                    }
 	                });
-	        document.addEventListener('mouseup', this._onMouseUp);
+	        document.addEventListener('mouseup', this._onMouseUp, true);
+	        this._onPointerUp = this._onPointerUp || this._handlePointerUp.bind(this);
+	        document.addEventListener('pointerup', this._onPointerUp, true);
 	    };
 	    FlyCamera.prototype.deactivate = function () {
 	        if (!this._isActive)
 	            return;
 	        this._isActive = false;
+	        this._isLooking = false;
+	        try {
+	            this._pressed?.clear?.();
+	        }
+	        catch {
+	            // ignore
+	        }
 	        // Exit pointer lock when deactivating
 	        this._exitPointerLock();
 	        // Remove listeners
 	        document.removeEventListener('keydown', this._onKeyDown, true);
 	        document.removeEventListener('keyup', this._onKeyUp, true);
 	        document.removeEventListener('mousemove', this._onMouseMove);
-	        document.removeEventListener('mouseup', this._onMouseUp);
+	        document.removeEventListener('pointermove', this._onPointerMove, true);
+	        document.removeEventListener('mouseup', this._onMouseUp, true);
+	        document.removeEventListener('pointerup', this._onPointerUp, true);
 	        const canvas = this.app?.graphicsDevice?.canvas;
 	        if (canvas && this._onClickToLock) {
-	            canvas.removeEventListener('mousedown', this._onClickToLock);
+	            canvas.removeEventListener('mousedown', this._onClickToLock, true);
+	        }
+	        if (canvas && this._onPointerDownToLook) {
+	            canvas.removeEventListener('pointerdown', this._onPointerDownToLook, true);
 	        }
 	    };
 	    FlyCamera.prototype.setConfig = function (config) {
@@ -105583,6 +105993,27 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        this._yaw = (this._yaw - dx) % 360;
 	        this._pitch = Math.max(-89, Math.min(89, this._pitch + dy));
 	    };
+	    FlyCamera.prototype._handlePointerMove = function (e) {
+	        if (!this._isLooking || !this._isActive)
+	            return;
+	        const dx = (e.movementX || 0) * this.lookSensitivity;
+	        const dy = (e.movementY || 0) * this.lookSensitivity * (this.invertY ? 1 : -1);
+	        this._yaw = (this._yaw - dx) % 360;
+	        this._pitch = Math.max(-89, Math.min(89, this._pitch + dy));
+	    };
+	    FlyCamera.prototype._handlePointerDown = function (e) {
+	        if (!this._isActive)
+	            return;
+	        // Primary button enables look while held (no pointer lock)
+	        if (e.button === 0) {
+	            this._isLooking = true;
+	        }
+	    };
+	    FlyCamera.prototype._handlePointerUp = function (e) {
+	        if (e.button === 0) {
+	            this._isLooking = false;
+	        }
+	    };
 	    FlyCamera.prototype._handlePointerLockChange = function () {
 	        const canvas = this.app.graphicsDevice.canvas;
 	        this._isPointerLocked = document.pointerLockElement === canvas;
@@ -105879,7 +106310,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        scope.resolve(key).setValue(values[key]);
 	    }
 	};
-	const createBlueNoiseTexture = (device) => {
+	const createBlueNoiseTexture$1 = (device) => {
 	    const size = 32;
 	    const texture = new Texture$1(device, {
 	        width: size,
@@ -105958,7 +106389,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	            throw new Error('InfiniteGrid: QuadRender is not available in this PlayCanvas version.');
 	        }
 	        this.quadRender = new QuadRender$1(this.shader);
-	        this.blueNoiseTexture = createBlueNoiseTexture(device);
+	        this.blueNoiseTexture = createBlueNoiseTexture$1(device);
 	        this._createBlendState();
 	        this._registerRenderHook();
 	    }
@@ -140324,51 +140755,161 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    return fallback.clone();
 	}
 
-	const THICK_WIREFRAME_LINE_WIDTH_UV$1 = 0.06;
-	const THICK_WIREFRAME_OPACITY$1 = 1.0;
-	const THICK_WIREFRAME_BOX_VS = /* glsl */ `
-attribute vec3 vertex_position;
-attribute vec2 vertex_texCoord0;
+	const cache = new WeakMap();
+	function createBlueNoiseTexture(device) {
+	    const size = 32;
+	    const texture = new Texture$1(device, {
+	        width: size,
+	        height: size,
+	        format: PIXELFORMAT_R8_G8_B8_A8,
+	        mipmaps: false,
+	    });
+	    texture.addressU = ADDRESS_REPEAT;
+	    texture.addressV = ADDRESS_REPEAT;
+	    texture.minFilter = FILTER_NEAREST;
+	    texture.magFilter = FILTER_NEAREST;
+	    const pixels = texture.lock();
+	    const seed = 1337;
+	    let value = seed;
+	    const random = () => {
+	        value ^= value << 13;
+	        value ^= value >>> 17;
+	        value ^= value << 5;
+	        return ((value >>> 0) % 256) / 255;
+	    };
+	    for (let i = 0; i < size * size; i++) {
+	        const noise = Math.floor(random() * 255);
+	        const idx = i * 4;
+	        pixels[idx + 0] = noise;
+	        pixels[idx + 1] = noise;
+	        pixels[idx + 2] = noise;
+	        pixels[idx + 3] = 255;
+	    }
+	    texture.unlock();
+	    texture.name = 'supersplat-blue-noise';
+	    return texture;
+	}
+	function getBlueNoiseTex32(device) {
+	    const existing = cache.get(device);
+	    if (existing)
+	        return existing;
+	    const tex = createBlueNoiseTexture(device);
+	    cache.set(device, tex);
+	    return tex;
+	}
 
-uniform mat4 matrix_model;
-uniform mat4 matrix_viewProjection;
+	// SuperSplat-like selection box shader: screen-space ray/box intersection that draws a thick
+	// white wire/grid pattern (not dependent on WebGL line width).
+	const BOX_SELECT_VS = /* glsl */ `
+    attribute vec3 vertex_position;
 
-varying vec2 vUv;
+    uniform mat4 matrix_model;
+    uniform mat4 matrix_viewProjection;
 
-void main(void) {
-  vUv = vertex_texCoord0;
-  gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position, 1.0);
-}
+    void main() {
+        gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position, 1.0);
+    }
 `;
-	const THICK_WIREFRAME_BOX_FS = /* glsl */ `
-#ifdef GL_OES_standard_derivatives
-#extension GL_OES_standard_derivatives : enable
-#endif
+	const BOX_SELECT_FS = /* glsl */ `
+    // ray-box intersection in box space
+    bool intersectBox(out float t0, out float t1, out int axis0, out int axis1, vec3 pos, vec3 dir, vec3 boxCen, vec3 boxLen)
+    {
+        bvec3 validDir = notEqual(dir, vec3(0.0));
+        vec3 absDir = abs(dir);
+        vec3 signDir = sign(dir);
+        vec3 m = vec3(
+            validDir.x ? 1.0 / absDir.x : 0.0,
+            validDir.y ? 1.0 / absDir.y : 0.0,
+            validDir.z ? 1.0 / absDir.z : 0.0
+        ) * signDir;
 
-precision mediump float;
+        vec3 n = m * (pos - boxCen);
+        vec3 k = abs(m) * boxLen;
 
-uniform vec3 lineColor;
-uniform float lineWidth;
-uniform float opacity;
+        vec3 v0 = -n - k;
+        vec3 v1 = -n + k;
 
-varying vec2 vUv;
+        // replace invalid axes with -inf and +inf so the tests below ignore them
+        v0 = mix(vec3(-1.0 / 0.0000001), v0, validDir);
+        v1 = mix(vec3(1.0 / 0.0000001), v1, validDir);
 
-void main(void) {
-  // Distance to nearest face border in UV space (0 at border, 0.5 at center).
-  float d = min(min(vUv.x, 1.0 - vUv.x), min(vUv.y, 1.0 - vUv.y));
+        axis0 = (v0.x > v0.y) ? ((v0.x > v0.z) ? 0 : 2) : ((v0.y > v0.z) ? 1 : 2);
+        axis1 = (v1.x < v1.y) ? ((v1.x < v1.z) ? 0 : 2) : ((v1.y < v1.z) ? 1 : 2);
 
-  // Anti-aliased edge mask (1 near border, 0 in face interior).
-  float aa = 0.002;
-#ifdef GL_OES_standard_derivatives
-  aa = max(aa, fwidth(d) * 1.5);
-#endif
-  float a = 1.0 - smoothstep(lineWidth, lineWidth + aa, d);
-  a *= opacity;
+        t0 = v0[axis0];
+        t1 = v1[axis1];
 
-  if (a <= 0.001) discard;
-  gl_FragColor = vec4(lineColor, a);
-}
+        if (t0 > t1 || t1 < 0.0) {
+            return false;
+        }
+
+        return true;
+    }
+
+    float calcDepth(in vec3 pos, in mat4 viewProjection) {
+        vec4 v = viewProjection * vec4(pos, 1.0);
+        return (v.z / v.w) * 0.5 + 0.5;
+    }
+
+    uniform sampler2D blueNoiseTex32;
+    uniform mat4 matrix_viewProjection;
+    uniform vec3 boxCen;
+    uniform vec3 boxLen;
+
+    uniform vec3 near_origin;
+    uniform vec3 near_x;
+    uniform vec3 near_y;
+
+    uniform vec3 far_origin;
+    uniform vec3 far_x;
+    uniform vec3 far_y;
+
+    uniform vec2 targetSize;
+    uniform vec3 lineColor;
+
+    bool writeDepth(float alpha) {
+        ivec2 uv = ivec2(gl_FragCoord.xy);
+        ivec2 size = textureSize(blueNoiseTex32, 0);
+        return alpha > texelFetch(blueNoiseTex32, uv % size, 0).y;
+    }
+
+    bool strips(vec3 pos, int axis) {
+        // Thickness tuned to match SuperSplat viewer "thick wire"
+        bvec3 b = lessThan(fract(pos * 2.0 + vec3(0.015)), vec3(0.06));
+        b[axis] = false;
+        return any(b);
+    }
+
+    void main() {
+        vec2 clip = gl_FragCoord.xy / targetSize;
+        vec3 worldNear = near_origin + near_x * clip.x + near_y * clip.y;
+        vec3 worldFar = far_origin + far_x * clip.x + far_y * clip.y;
+        vec3 rayDir = normalize(worldFar - worldNear);
+
+        float t0, t1;
+        int axis0, axis1;
+        if (!intersectBox(t0, t1, axis0, axis1, worldNear, rayDir, boxCen, boxLen)) {
+            discard;
+        }
+
+        vec3 frontPos = worldNear + rayDir * t0;
+        bool front = t0 > 0.0 && strips(frontPos - boxCen, axis0);
+
+        vec3 backPos = worldNear + rayDir * t1;
+        bool back = strips(backPos - boxCen, axis1);
+
+        if (front) {
+            gl_FragColor = vec4(lineColor, 0.6);
+            gl_FragDepth = writeDepth(0.6) ? calcDepth(frontPos, matrix_viewProjection) : 1.0;
+        } else if (back) {
+            gl_FragColor = vec4(lineColor, 0.6);
+            gl_FragDepth = writeDepth(0.6) ? calcDepth(backPos, matrix_viewProjection) : 1.0;
+        } else {
+            discard;
+        }
+    }
 `;
+	const tmpPos$1 = new Vec3();
 	class BoxSelectionAPI {
 	    constructor() {
 	        this.boxes = new Map();
@@ -140405,6 +140946,7 @@ void main(void) {
 	        this.ensureTranslateGizmo();
 	        this.updateGizmoSize();
 	        this.updateGizmoAttachment();
+	        this.updateBoxShaderUniforms();
 	    }
 	    createBox(options = {}) {
 	        if (!this.app || !this.parent) {
@@ -140427,7 +140969,7 @@ void main(void) {
 	        entity.render.castShadows = false;
 	        entity.render.receiveShadows = false;
 	        entity.render.enabled = visible;
-	        // Render as a thick wireframe (shader-based) so line width is consistent across browsers.
+	        // Render as a thick wireframe (shader-based) to match SuperSplat viewer.
 	        this.parent.addChild(entity);
 	        const record = {
 	            id,
@@ -140514,8 +141056,8 @@ void main(void) {
 	            return false;
 	        }
 	        record.color.set(r, g, b);
-	        const mat = this.buildWireframeMaterial(record.color);
-	        record.entity.render.material = mat;
+	        const mat = record.entity.render?.material;
+	        mat?.setParameter?.('lineColor', [record.color.x, record.color.y, record.color.z]);
 	        this.requestRender();
 	        return true;
 	    }
@@ -140710,19 +141252,34 @@ void main(void) {
 	    }
 	    buildWireframeMaterial(color) {
 	        const material = new ShaderMaterial$1({
-	            uniqueName: 'boxSelectionThickWireframe',
-	            vertexGLSL: THICK_WIREFRAME_BOX_VS,
-	            fragmentGLSL: THICK_WIREFRAME_BOX_FS,
+	            uniqueName: 'boxSelectionSupersplatWire',
+	            vertexGLSL: BOX_SELECT_VS,
+	            fragmentGLSL: BOX_SELECT_FS,
 	        });
-	        material.cull = CULLFACE_NONE;
-	        material.depthWrite = false;
+	        material.cull = CULLFACE_FRONT;
 	        material.blendState = new BlendState(true, BLENDEQUATION_ADD, BLENDMODE_SRC_ALPHA, BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDEQUATION_ADD, BLENDMODE_ONE, BLENDMODE_ONE_MINUS_SRC_ALPHA);
-	        material.setParameter('lineColor', [color.x, color.y, color.z]);
-	        material.setParameter('lineWidth', THICK_WIREFRAME_LINE_WIDTH_UV$1);
-	        material.setParameter('opacity', THICK_WIREFRAME_OPACITY$1);
 	        material.update();
+	        material.setParameter('lineColor', [color.x, color.y, color.z]);
 	        return material;
 	    }
+	    updateBoxShaderUniforms() {
+	        if (!this.app)
+	            return;
+	        const device = this.app.graphicsDevice;
+	        // Ensure required global uniforms for selection shaders.
+	        device.scope.resolve('targetSize').setValue([device.width, device.height]);
+	        device.scope.resolve('blueNoiseTex32').setValue(getBlueNoiseTex32(device));
+	        for (const record of this.boxes.values()) {
+	            const mat = record.entity.render?.material;
+	            if (!mat?.setParameter)
+	                continue;
+	            // World-space center
+	            record.entity.getWorldTransform().getTranslation(tmpPos$1);
+	            mat.setParameter('boxCen', [tmpPos$1.x, tmpPos$1.y, tmpPos$1.z]);
+	            // Half extents
+	            mat.setParameter('boxLen', [record.lenX * 0.5, record.lenY * 0.5, record.lenZ * 0.5]);
+	        }
+	    }
 	    emitEvent(event, detail) {
 	        if (this.onEvent) {
 	            this.onEvent(event, detail);
@@ -140734,59 +141291,110 @@ void main(void) {
 	    }
 	}
 
-	const THICK_WIREFRAME_LINE_WIDTH_UV = 0.035;
-	const THICK_WIREFRAME_OPACITY = 1.0;
-	const SPHERE_GRID_U = 14.0;
-	const SPHERE_GRID_V = 10.0;
-	const THICK_WIREFRAME_SPHERE_VS = /* glsl */ `
-attribute vec3 vertex_position;
-attribute vec2 vertex_texCoord0;
-
-uniform mat4 matrix_model;
-uniform mat4 matrix_viewProjection;
+	// SuperSplat-like selection sphere shader: screen-space ray/sphere intersection that draws a thick
+	// white wire/grid pattern (not dependent on WebGL line width).
+	const SPHERE_SELECT_VS = /* glsl */ `
+    attribute vec3 vertex_position;
 
-varying vec2 vUv;
+    uniform mat4 matrix_model;
+    uniform mat4 matrix_viewProjection;
 
-void main(void) {
-  vUv = vertex_texCoord0;
-  gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position, 1.0);
-}
+    void main() {
+        gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position, 1.0);
+    }
 `;
-	const THICK_WIREFRAME_SPHERE_FS = /* glsl */ `
-#ifdef GL_OES_standard_derivatives
-#extension GL_OES_standard_derivatives : enable
-#endif
+	const SPHERE_SELECT_FS = /* glsl */ `
+    bool intersectSphere(out float t0, out float t1, vec3 pos, vec3 dir, vec4 sphere) {
+        vec3 L = sphere.xyz - pos;
+        float tca = dot(L, dir);
+
+        float d2 = sphere.w * sphere.w - (dot(L, L) - tca * tca);
+        if (d2 <= 0.0) {
+            return false;
+        }
+
+        float thc = sqrt(d2);
+        t0 = tca - thc;
+        t1 = tca + thc;
+        if (t1 <= 0.0) {
+            return false;
+        }
 
-precision mediump float;
+        return true;
+    }
 
-uniform vec3 lineColor;
-uniform float lineWidth;
-uniform float opacity;
+    float calcDepth(in vec3 pos, in mat4 viewProjection) {
+        vec4 v = viewProjection * vec4(pos, 1.0);
+        return (v.z / v.w) * 0.5 + 0.5;
+    }
 
-varying vec2 vUv;
+    vec2 calcAzimuthElev(in vec3 dir) {
+        float azimuth = atan(dir.z, dir.x);
+        float elev = asin(dir.y);
+        return vec2(azimuth, elev) * 180.0 / 3.14159;
+    }
 
-float gridLineDist(float v, float freq) {
-  float f = fract(v * freq);
-  return min(f, 1.0 - f);
-}
+    uniform sampler2D blueNoiseTex32;
+    uniform mat4 matrix_viewProjection;
+    uniform vec4 sphere;
+    uniform vec3 lineColor;
 
-void main(void) {
-  // "Wireframe-like" lat/long grid in UV space.
-  float du = gridLineDist(vUv.x, ${SPHERE_GRID_U});
-  float dv = gridLineDist(vUv.y, ${SPHERE_GRID_V});
-  float d = min(du, dv);
-
-  float aa = 0.002;
-#ifdef GL_OES_standard_derivatives
-  aa = max(aa, fwidth(d) * 1.5);
-#endif
-  float a = 1.0 - smoothstep(lineWidth, lineWidth + aa, d);
-  a *= opacity;
+    uniform vec3 near_origin;
+    uniform vec3 near_x;
+    uniform vec3 near_y;
 
-  if (a <= 0.001) discard;
-  gl_FragColor = vec4(lineColor, a);
-}
+    uniform vec3 far_origin;
+    uniform vec3 far_x;
+    uniform vec3 far_y;
+
+    uniform vec2 targetSize;
+
+    bool writeDepth(float alpha) {
+        vec2 uv = fract(gl_FragCoord.xy / 32.0);
+        float noise = texture2DLod(blueNoiseTex32, uv, 0.0).y;
+        return alpha > noise;
+    }
+
+    bool strips(vec3 lp) {
+        vec2 ae = calcAzimuthElev(normalize(lp));
+
+        float spacing = 180.0 / (2.0 * 3.14159 * sphere.w);
+        // Thickness tuned to match SuperSplat viewer "thick wire"
+        float size = 0.06;
+        return fract(ae.x / spacing) < size ||
+               fract(ae.y / spacing) < size;
+    }
+
+    void main() {
+        vec2 clip = gl_FragCoord.xy / targetSize;
+        vec3 worldNear = near_origin + near_x * clip.x + near_y * clip.y;
+        vec3 worldFar = far_origin + far_x * clip.x + far_y * clip.y;
+
+        vec3 rayDir = normalize(worldFar - worldNear);
+
+        float t0, t1;
+        if (!intersectSphere(t0, t1, worldNear, rayDir, sphere)) {
+            discard;
+        }
+
+        vec3 frontPos = worldNear + rayDir * t0;
+        bool front = t0 > 0.0 && strips(frontPos - sphere.xyz);
+
+        vec3 backPos = worldNear + rayDir * t1;
+        bool back = strips(backPos - sphere.xyz);
+
+        if (front) {
+            gl_FragColor = vec4(lineColor, 0.6);
+            gl_FragDepth = writeDepth(0.6) ? calcDepth(frontPos, matrix_viewProjection) : 1.0;
+        } else if (back) {
+            gl_FragColor = vec4(lineColor, 0.6);
+            gl_FragDepth = writeDepth(0.6) ? calcDepth(backPos, matrix_viewProjection) : 1.0;
+        } else {
+            discard;
+        }
+    }
 `;
+	const tmpPos = new Vec3();
 	class SphereSelectionAPI {
 	    constructor() {
 	        this.spheres = new Map();
@@ -140822,6 +141430,7 @@ void main(void) {
 	        this.ensureTranslateGizmo();
 	        this.updateGizmoSize();
 	        this.updateGizmoAttachment();
+	        this.updateSphereShaderUniforms();
 	    }
 	    createSphere(options = {}) {
 	        if (!this.app || !this.parent) {
@@ -140834,7 +141443,8 @@ void main(void) {
 	        const visible = options.visible ?? true;
 	        const entity = new Entity(id);
 	        entity.addComponent('render', {
-	            type: 'sphere',
+	            // Use a box proxy like SuperSplat; shader ray-marches a true sphere.
+	            type: 'box',
 	            material: this.buildWireframeMaterial(color),
 	        });
 	        entity.setLocalScale(radius * 2, radius * 2, radius * 2); // sphere diameter = radius * 2
@@ -140842,7 +141452,7 @@ void main(void) {
 	        entity.render.castShadows = false;
 	        entity.render.receiveShadows = false;
 	        entity.render.enabled = visible;
-	        // Render as a thick wireframe (shader-based) so line width is consistent across browsers.
+	        // Render as a thick wireframe (shader-based) to match SuperSplat viewer.
 	        this.parent.addChild(entity);
 	        const record = {
 	            id,
@@ -140925,8 +141535,12 @@ void main(void) {
 	            return false;
 	        }
 	        record.color.set(r, g, b);
-	        const mat = this.buildWireframeMaterial(record.color);
-	        record.entity.render.material = mat;
+	        const mat = record.entity.render?.material;
+	        mat?.setParameter?.('lineColor', [
+	            record.color.x,
+	            record.color.y,
+	            record.color.z,
+	        ]);
 	        this.requestRender();
 	        return true;
 	    }
@@ -141124,19 +141738,30 @@ void main(void) {
 	    }
 	    buildWireframeMaterial(color) {
 	        const material = new ShaderMaterial$1({
-	            uniqueName: 'sphereSelectionThickWireframe',
-	            vertexGLSL: THICK_WIREFRAME_SPHERE_VS,
-	            fragmentGLSL: THICK_WIREFRAME_SPHERE_FS,
+	            uniqueName: 'sphereSelectionSupersplatWire',
+	            vertexGLSL: SPHERE_SELECT_VS,
+	            fragmentGLSL: SPHERE_SELECT_FS,
 	        });
-	        material.cull = CULLFACE_NONE;
-	        material.depthWrite = false;
+	        material.cull = CULLFACE_FRONT;
 	        material.blendState = new BlendState(true, BLENDEQUATION_ADD, BLENDMODE_SRC_ALPHA, BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDEQUATION_ADD, BLENDMODE_ONE, BLENDMODE_ONE_MINUS_SRC_ALPHA);
-	        material.setParameter('lineColor', [color.x, color.y, color.z]);
-	        material.setParameter('lineWidth', THICK_WIREFRAME_LINE_WIDTH_UV);
-	        material.setParameter('opacity', THICK_WIREFRAME_OPACITY);
 	        material.update();
+	        material.setParameter('lineColor', [color.x, color.y, color.z]);
 	        return material;
 	    }
+	    updateSphereShaderUniforms() {
+	        if (!this.app)
+	            return;
+	        const device = this.app.graphicsDevice;
+	        device.scope.resolve('targetSize').setValue([device.width, device.height]);
+	        device.scope.resolve('blueNoiseTex32').setValue(getBlueNoiseTex32(device));
+	        for (const record of this.spheres.values()) {
+	            const mat = record.entity.render?.material;
+	            if (!mat?.setParameter)
+	                continue;
+	            record.entity.getWorldTransform().getTranslation(tmpPos);
+	            mat.setParameter('sphere', [tmpPos.x, tmpPos.y, tmpPos.z, record.radius]);
+	        }
+	    }
 	    emitEvent(event, detail) {
 	        if (this.onEvent) {
 	            this.onEvent(event, detail);
@@ -146763,7 +147388,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        const { config } = this.scene;
 	        const state = this.viewerEventState;
 	        // Colors and view settings from scene config
-	        const selectedClr = config.selectedClr ?? { r: 1, g: 1, b: 0, a: 1 };
+	        const selectedClr = config.selectedClr ?? { r: 1, g: 0.5, b: 0, a: 1 };
 	        const unselectedClr = config.unselectedClr ?? { r: 0, g: 0, b: 1, a: 0.5 };
 	        const lockedClr = config.lockedClr ?? { r: 0, g: 0, b: 0, a: 0.05 };
 	        const bgClr = config.bgClr ?? { r: 0, g: 0, b: 0, a: 1 };
@@ -147197,9 +147822,10 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        this.app = ctx.app;
 	        this.entities.camera = ctx.camera;
 	        const cameraAny = this.entities.camera;
-	        if (cameraAny &&
-	            !cameraAny.script &&
-	            typeof cameraAny.addComponent === 'function') {
+	        // SuperSplat's PCApp omits ScriptComponentSystem, so `addComponent('script')`
+	        // will not produce `camera.script.create()`. We keep the attempt (in case
+	        // the underlying app changes), but also support a controller-based fallback.
+	        if (cameraAny && !cameraAny.script && typeof cameraAny.addComponent === 'function') {
 	            try {
 	                cameraAny.addComponent('script');
 	            }
@@ -147222,16 +147848,23 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	                minHeight: DEFAULT_FLY_CAMERA_CONFIG.minHeight,
 	                maxHeight: DEFAULT_FLY_CAMERA_CONFIG.maxHeight,
 	            };
-	            this._fly = cameraAny?.script?.create?.('flyCamera', {
-	                attributes: flyAttributes,
-	            });
-	            if (this._fly) {
-	                ;
-	                this._fly.emitFlyEvent = (type, detail) => {
-	                    this.emit({ type: type, detail });
-	                };
-	                // Deactivate by default; orbit is the initial mode
-	                this._fly.deactivate?.();
+	            // Prefer script-based fly when available; fallback to controller otherwise.
+	            const canCreateScript = typeof cameraAny?.script?.create === 'function';
+	            if (canCreateScript) {
+	                const created = cameraAny.script.create('flyCamera', { attributes: flyAttributes });
+	                this._fly = created;
+	                if (this._fly) {
+	                    ;
+	                    this._fly.emitFlyEvent = (type, detail) => {
+	                        this.emit({ type: type, detail });
+	                    };
+	                    this._fly.deactivate?.();
+	                }
+	            }
+	            else {
+	                const controller = new FlyCameraController(ctx.app, cameraAny, (type, detail) => this.emit({ type: type, detail }), flyAttributes);
+	                controller.deactivate();
+	                this._fly = controller;
 	            }
 	            this._cameraMode = 'orbit';
 	        }
@@ -149100,17 +149733,31 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	                // Stop supersplat orbit updates + input
 	                this._supersplat.setCameraControlsEnabled(false);
 	                this._supersplat.setCameraManualControl(true);
-	                // Align fly yaw/pitch with current camera rotation to avoid snapping
-	                try {
-	                    const euler = this.entities.camera?.getEulerAngles?.();
-	                    if (euler && this._fly) {
-	                        ;
-	                        this._fly._pitch = euler.x || 0;
-	                        this._fly._yaw = euler.y || 0;
+	                // Preserve camera position and rotation when switching to fly mode
+	                if (this._fly) {
+	                    // For FlyCameraController (fallback path)
+	                    if (typeof this._fly.syncFromEntity === 'function') {
+	                        this._fly.syncFromEntity();
+	                    }
+	                    else {
+	                        // For FlyCameraScript (legacy path)
+	                        try {
+	                            const pos = this.entities.camera?.getPosition?.();
+	                            if (pos) {
+	                                const posVec = pos.clone ? pos.clone() : new Vec3(pos.x || 0, pos.y || 0, pos.z || 0);
+	                                this.entities.camera?.setPosition?.(posVec);
+	                            }
+	                            const euler = this.entities.camera?.getEulerAngles?.();
+	                            if (euler) {
+	                                ;
+	                                this._fly._pitch = euler.x || 0;
+	                                this._fly._yaw = euler.y || 0;
+	                            }
+	                        }
+	                        catch {
+	                            // ignore
+	                        }
 	                    }
-	                }
-	                catch {
-	                    // ignore
 	                }
 	                this._fly?.activate?.();
 	                this._cameraMode = 'fly';
@@ -149227,9 +149874,48 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        this._cameraModeManager?.setFlyConfig(config);
 	    }
 	    getFlyCameraConfig() {
+	        // SuperSplat path: fly is either a script instance or controller fallback
+	        if (this._supersplat && this._fly) {
+	            try {
+	                const flyAny = this._fly;
+	                const cfg = {
+	                    moveSpeed: flyAny.moveSpeed,
+	                    fastSpeedMultiplier: flyAny.fastSpeedMultiplier,
+	                    slowSpeedMultiplier: flyAny.slowSpeedMultiplier,
+	                    lookSensitivity: flyAny.lookSensitivity,
+	                    invertY: !!flyAny.invertY,
+	                    keyBindings: { ...(flyAny.keyBindings || {}) },
+	                    smoothing: flyAny.smoothing,
+	                    friction: flyAny.friction,
+	                    enableCollision: !!flyAny.enableCollision,
+	                    minHeight: flyAny.minHeight ?? null,
+	                    maxHeight: flyAny.maxHeight ?? null,
+	                };
+	                return cfg;
+	            }
+	            catch {
+	                return null;
+	            }
+	        }
 	        return this._cameraModeManager?.getFlyConfig() || null;
 	    }
 	    getFlyCameraState() {
+	        // SuperSplat path: fly is either a script instance or controller fallback
+	        if (this._supersplat && this._fly?.getState) {
+	            try {
+	                const state = this._fly.getState();
+	                return {
+	                    mode: this._cameraMode,
+	                    position: state.position,
+	                    rotation: state.rotation,
+	                    velocity: state.velocity,
+	                    isMoving: state.isMoving,
+	                };
+	            }
+	            catch {
+	                return null;
+	            }
+	        }
 	        return this._cameraModeManager?.getFlyState() || null;
 	    }
 	    _setupScene() {