@pascal-app/viewer 1.0.6 → 1.1.0

package/README.md

@@ -5,13 +5,13 @@
 ## Installation
 
 ```bash
-npm install @pascal-app/core @pascal-app/viewer @pascal-app/editor @pascal-app/nodes
+npm install @pascal-app/core @pascal-app/viewer @pascal-app/nodes
 ```
 
 ## Peer Dependencies
 
 ```bash
-npm install next react react-dom three @react-three/fiber @react-three/drei lucide-react zustand
+npm install react react-dom three @react-three/fiber @react-three/drei lucide-react zustand
 ```
 
 ## What's Included
@@ -25,33 +25,66 @@ npm install next react react-dom three @react-three/fiber @react-three/drei luci
 
 ## Usage
 
-```typescript
-import { loadPlugin } from '@pascal-app/core'
-import { builtinPlugin } from '@pascal-app/nodes'
-import { Viewer } from '@pascal-app/viewer'
-import { useEffect, useState } from 'react'
+The live render entry rebuilds geometry from a scene graph in ordinary React applications,
+including Vite. It requires neither Next.js, Tailwind, nor `@pascal-app/editor`.
 
-const registryReady = loadPlugin(builtinPlugin)
+```tsx
+import { acquireSceneReadOnlyLease, loadPlugin, useScene } from '@pascal-app/core'
+import { renderPlugin } from '@pascal-app/nodes/render'
+import { configureViewer, Viewer } from '@pascal-app/viewer'
+import { OrbitControls } from '@react-three/drei'
+import scene from './scene.json'
+
+configureViewer({
+  assetsBaseUrl: 'https://editor.pascal.app',
+  storageUrl: 'https://your-storage.example',
+  // Optional self-hosted decoder directories (include the trailing slash):
+  // decoders: { dracoPath: '/decoders/draco/', basisPath: '/decoders/basis/' },
+})
+await loadPlugin(renderPlugin)
+const releaseReadOnly = acquireSceneReadOnlyLease()
+useScene.getState().setScene(scene.nodes, scene.rootNodeIds, {
+  materials: scene.materials,
+  collections: scene.collections,
+  installedPlugins: scene.installedPlugins,
+})
 
 function App() {
-  const [ready, setReady] = useState(false)
-
-  useEffect(() => {
-    void registryReady.then(() => setReady(true))
-  }, [])
-
-  if (!ready) return null
-
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
-      <Viewer />
+      <Viewer>
+        <OrbitControls makeDefault target={[0, 1, 0]} />
+      </Viewer>
     </div>
   )
 }
+
+// On teardown, unmount App before releasing the lease:
+// releaseReadOnly()
 ```
 
-Load the built-in plugin once, before mounting any viewer. Without it, the registry has no node
-definitions and scene nodes cannot render. Host-provided plugins use the same `loadPlugin` API.
+Load exactly one built-in plugin per runtime: `renderPlugin` for a viewer, or the full
+`builtinPlugin` from `@pascal-app/nodes` for an editor. Without registration, nodes cannot render.
+The read-only lease suppresses document-writing systems while the live geometry systems rebuild
+from the supplied graph. Keep it until the viewer unmounts.
+
+**One active scene per page/package instance.** `useScene`, `useViewer`, the node registry,
+`sceneRegistry`, loader caches and viewer systems are shared singletons. Concurrent viewers cannot
+own independent graphs. Unmount the previous viewer and release its read-only lease and host
+subscriptions before switching projects; hydrate the new graph and reset the host's viewer
+selection/project presentation before remounting. Use a separate page/iframe for independent graphs.
+
+`configureViewer` resolves asset and storage origins at call time. Without configuration, assets
+use `https://editor.pascal.app`, with the existing `NEXT_PUBLIC_ASSETS_CDN_URL` and
+`NEXT_PUBLIC_SUPABASE_URL` environments used when available. Next hosts should pass those values
+explicitly at bootstrap. Draco defaults to version 1.5.5 and Basis to the Three.js 0.187.0
+transcoder. Configure before loading assets: changing paths does not unload cached models or
+already initialized decoder workers. KTX2 support is detected per renderer and misaligned textures
+retain the RGBA fallback. Denied browser storage disables preference persistence without blocking
+rendering.
+
+See [`fixtures/viewer-live`](../../fixtures/viewer-live) for a complete small graph and the
+isolated packed-package dev/production smoke test.
 
 ## Custom Camera Controls
 
@@ -212,11 +245,11 @@ function ViewerControls() {
 ## Asset CDN Helpers
 
 ```typescript
-import { resolveCdnUrl, ASSETS_CDN_URL } from '@pascal-app/viewer'
+import { resolveCdnUrl } from '@pascal-app/viewer'
 
 // Resolves relative paths to CDN URLs
 const url = resolveCdnUrl('/items/chair/model.glb')
-// → 'https://pascal-cdn.wawasensei.dev/items/chair/model.glb'
+// → 'https://editor.pascal.app/items/chair/model.glb'
 
 // Handles external URLs and asset:// protocol
 const externalUrl = resolveCdnUrl('https://example.com/model.glb')

package/dist/components/viewer/daylight-atmosphere.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The colored appearance's built-in sun and sky: real sun position for the site (or a fallback
+ * location), a time-of-day preset and a weather preset. One shadowed key (the sun, or a cool moon
+ * at night), the sky as a PMREM environment, metered exposure and eye-like white balance.
+ * Installed through the generic `SceneAtmosphere` seam, so a plugin atmosphere mounted later
+ * still takes precedence.
+ */
+export declare function DaylightAtmosphere(): import("react").JSX.Element;
+//# sourceMappingURL=daylight-atmosphere.d.ts.map

package/dist/components/viewer/daylight-atmosphere.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"daylight-atmosphere.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/daylight-atmosphere.tsx"],"names":[],"mappings":"AAgFA;;;;;;GAMG;AACH,wBAAgB,kBAAkB,gCAySjC"}

package/dist/components/viewer/daylight-atmosphere.js

@@ -0,0 +1,315 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInteractive, useScene } from '@pascal-app/core';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { BackSide, Color, MathUtils, Mesh, Scene, SphereGeometry, Vector3 } from 'three';
+import { pmremTexture, positionWorldDirection, vec3 } from 'three/tsl';
+import { MeshBasicNodeMaterial, PMREMGenerator, } from 'three/webgpu';
+import { resolveLocation } from '../../lib/daylight/location';
+import { installDaylightMaterialHooks } from '../../lib/daylight/material-hooks';
+import { restoreLampEmitters } from '../../lib/daylight/room-scene';
+import { daylightRooms } from '../../lib/daylight/rooms';
+import { daylightUniforms, setDaylightRenderer } from '../../lib/daylight/runtime';
+import { createDaylightSky, WEATHER_COVER } from '../../lib/daylight/sky';
+import { presetInstant, solarClockInstant, solarLight, } from '../../lib/daylight/solar';
+import useViewer, {} from '../../store/use-viewer';
+import { SceneAtmosphere } from './scene-atmosphere';
+import { useDaylightRooms } from './use-daylight-rooms';
+/** Irradiance that renders at exposure 1 (≈ a clear afternoon exterior). */
+const METER_REF = 3.2;
+/** Image-based lighting gain on the sky environment. */
+const ENV_INTENSITY = 1.15;
+const MOON_COLOR = new Color('#9fb4ff');
+/** Ground fog range (m), capped by the camera's far plane (the grounds add a horizon haze). */
+const FOG_START = 250;
+const FOG_END = 2600;
+/** Eye-like chromatic adaptation strength (0 = off, 1 = full neutralisation). */
+const WHITE_BALANCE = 0.75;
+/**
+ * How much of its extra exposure lamp light seen from outside gives back, relative to the rooms'
+ * indoor exposure (0 none … 1 all; a little is kept, so lit windows still read as glowing).
+ */
+const LAMP_VIEW_COMP = 0.8;
+/** Maximum metered exposure boost with the camera inside a room. */
+const INTERIOR_EV = 2.4;
+/**
+ * Indoors the eye opens up a little past the meter's partial adaptation (EV): rooms read airy
+ * rather than dim, by day and by lamplight alike.
+ */
+const INTERIOR_BIAS_EV = 0.35;
+/** Sun shadow map per quality tier. */
+const SHADOW_MAP = { high: 4096, medium: 2048, low: 1024 };
+/** EON rough diffuse per quality tier. */
+const EON = { high: 0.6, medium: 0.6, low: 0 };
+const luminance = (c) => 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b;
+/** Cosine-weighted hemisphere probes for the sky irradiance colour. */
+const HEMISPHERE = [
+    new Vector3(0, 1, 0),
+    ...Array.from({ length: 6 }, (_, i) => new Vector3(Math.cos((i * Math.PI) / 3), 0.6, Math.sin((i * Math.PI) / 3)).normalize()),
+    ...Array.from({ length: 6 }, (_, i) => new Vector3(Math.cos((i * Math.PI) / 3 + 0.5), 0.15, Math.sin((i * Math.PI) / 3 + 0.5)).normalize()),
+];
+const UP = new Vector3(0, 1, 0);
+/**
+ * The colored appearance's built-in sun and sky: real sun position for the site (or a fallback
+ * location), a time-of-day preset and a weather preset. One shadowed key (the sun, or a cool moon
+ * at night), the sky as a PMREM environment, metered exposure and eye-like white balance.
+ * Installed through the generic `SceneAtmosphere` seam, so a plugin atmosphere mounted later
+ * still takes precedence.
+ */
+export function DaylightAtmosphere() {
+    const renderer = useThree((s) => s.gl);
+    const timeOfDay = useViewer((s) => s.timeOfDay);
+    const timeOfDayMinutes = useViewer((s) => s.timeOfDayMinutes);
+    const skyLive = useViewer((s) => s.skyLive);
+    const weather = useViewer((s) => s.weather);
+    const deviceLocation = useViewer((s) => s.deviceLocation);
+    const transparent = useViewer((s) => s.transparentBackground);
+    const quality = useViewer((s) => s.renderQuality);
+    const site = useScene((state) => {
+        for (const id of state.rootNodeIds) {
+            const node = state.nodes[id];
+            if (node?.type === 'site')
+                return node;
+        }
+        return undefined;
+    });
+    const sky = useMemo(() => createDaylightSky(), []);
+    // The environment: a PMREM of the visible sky (clouds and aureole, no sun disc — the key light
+    // is the sun), re-captured into the same target when the sun or the weather changes, so the
+    // environment node installed once stays valid.
+    const environment = useMemo(() => {
+        const scene = new Scene();
+        const material = new MeshBasicNodeMaterial({ side: BackSide, depthWrite: false });
+        material.colorNode = sky.skyRadiance(positionWorldDirection, { disc: false });
+        // Radiance, not an unlit surface: it keeps the exposure (see the material hooks).
+        material.userData.daylightSky = true;
+        const dome = new Mesh(new SphereGeometry(10, 48, 24), material);
+        scene.add(dome);
+        // The viewer mounts its scene once the GPU renderer is initialized; anything else (a test
+        // double) renders without the sky environment.
+        const ready = renderer.hasInitialized?.() === true;
+        if (!ready)
+            return { dome, pmrem: null, target: null, capture: () => { } };
+        const pmrem = new PMREMGenerator(renderer);
+        const capture = (into) => pmrem.fromScene(scene, 0, 0.1, 100, {
+            size: 256,
+            renderTarget: into,
+        });
+        const target = capture(null);
+        return { dome, pmrem, target, capture: () => capture(target) };
+    }, [renderer, sky]);
+    const source = useMemo(() => ({
+        skyRadiance: (dir) => sky.skyRadiance(dir),
+        reflectionRadiance: (dir) => sky.skyRadiance(dir, { disc: false }).mul(ENV_INTENSITY),
+        // Just above the horizon in the view's heading: what the ground fog and the backdrop meet at.
+        fogRadiance: (dir) => sky.horizonRadiance(vec3(dir.x, 0.004, dir.z)),
+        environmentNode: (environment.target
+            ? pmremTexture(environment.target.texture).mul(ENV_INTENSITY)
+            : vec3(0)),
+        sunDirection: new Vector3(0, 1, 0),
+        sunColor: new Color(1, 1, 1),
+        sunIntensity: 3,
+        moonDirection: new Vector3(0, 1, 0),
+        moonColor: MOON_COLOR.clone(),
+        moonIntensity: 0,
+        skyColor: new Color(1, 1, 1),
+        groundColor: new Color(0.5, 0.5, 0.5),
+        hemisphereIntensity: 0,
+        ambientIntensity: 0,
+        exposure: 1,
+        fogStart: FOG_START,
+        fogEnd: FOG_END,
+        whiteBalance: new Vector3(1, 1, 1),
+        shadow: { mapSize: SHADOW_MAP.high, bias: -0.0002, normalBias: 0.035, radius: 2 },
+        elevation: 45,
+    }), [environment, sky]);
+    const solar = useRef(null);
+    const meter = useRef({ ev: 0, keyE: 0, night: 0, skyLum: 0, outdoor: new Color(1, 1, 1) });
+    const wbTarget = useMemo(() => new Vector3(1, 1, 1), []);
+    useDaylightRooms();
+    // Materials attach their daylight hooks for this renderer only (thumbnail canvases elsewhere
+    // keep their plain look); the uniforms go back to neutral when the look leaves.
+    useLayoutEffect(() => {
+        installDaylightMaterialHooks();
+        setDaylightRenderer(renderer, true);
+        daylightUniforms.albedoClamp.value = 1;
+        return () => {
+            restoreLampEmitters();
+            setDaylightRenderer(renderer, false);
+            daylightUniforms.albedoClamp.value = 0;
+            daylightUniforms.eon.value = 0;
+            daylightUniforms.lampLevel.value = 0;
+            daylightUniforms.glowComp.value = 1;
+            daylightUniforms.emitterExpInv.value = 1;
+            daylightRooms.lampView.value = 1;
+        };
+    }, [renderer]);
+    useEffect(() => {
+        daylightUniforms.eon.value = EON[quality];
+        source.shadow.mapSize = SHADOW_MAP[quality];
+        // The Low tier drops the soft room map (openings) and the sky patch.
+        daylightRooms.softRooms.value = quality === 'low' ? 0 : 1;
+        daylightRooms.skyPatch.value = quality === 'low' ? 0 : 3;
+        daylightRooms.refresh();
+    }, [quality, source]);
+    // The live sky moves on with the clock, a minute at a time.
+    const [clockTick, setClockTick] = useState(0);
+    useEffect(() => {
+        if (!skyLive || transparent)
+            return;
+        const timer = setInterval(() => setClockTick((tick) => tick + 1), 60_000);
+        return () => clearInterval(timer);
+    }, [skyLive, transparent]);
+    // Lamp switches follow the sun only when it crosses into or out of the evening, so the
+    // person's own switches survive weather changes and the live clock's ticks.
+    const lampsLit = useRef(null);
+    // Sun, sky and lights follow the time of day: the live clock, an exact time, or a preset
+    // (pinned to a neutral fair midday for transparent captures).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: clockTick re-runs the live sky.
+    useEffect(() => {
+        const cover = transparent ? WEATHER_COVER.fair : WEATHER_COVER[weather];
+        const { location } = resolveLocation(site, deviceLocation);
+        const today = new Date();
+        const when = transparent
+            ? presetInstant(today, location.lat, location.lng, 'midday')
+            : skyLive
+                ? today
+                : timeOfDayMinutes !== null
+                    ? solarClockInstant(today, location.lng, timeOfDayMinutes)
+                    : presetInstant(today, location.lat, location.lng, timeOfDay);
+        const sun = solarLight(when, location.lat, location.lng, site?.northRotation ?? 0, solar.current ?? undefined);
+        solar.current = sun;
+        sky.update(sun, cover);
+        source.elevation = sun.elevation;
+        // One key light: the sun, or below 1° a cool, dim moon high on the other side of the sky.
+        // Clouds dim the sun statistically (no cloud shadows) and soften its shadows.
+        if (sun.elevation < 1) {
+            source.sunDirection
+                .set(-sun.direction.x, Math.max(0.5, Math.abs(sun.direction.y)), -sun.direction.z)
+                .normalize();
+            source.sunColor.copy(MOON_COLOR);
+            source.sunIntensity = 0.18 * sun.night;
+        }
+        else {
+            source.sunDirection.copy(sun.direction);
+            source.sunColor.copy(sun.color);
+            source.sunIntensity = 3.4 * sun.strength * (1 - 0.5 * cover ** 1.6);
+        }
+        source.moonIntensity = 0;
+        source.shadow.radius = 1.6 + 2.2 * (1 - MathUtils.smoothstep(sun.elevation, 2, 30)) + cover * 3;
+        meter.current.keyE = source.sunIntensity * Math.max(0.15, sun.direction.y);
+        meter.current.night = sun.night;
+        // The outdoor illuminant (sky irradiance + the key light), for the white balance.
+        const skyIrr = new Color(0, 0, 0);
+        let weight = 0;
+        for (const d of HEMISPHERE) {
+            skyIrr.add(sky.radianceCpu(d).multiplyScalar(d.y));
+            weight += d.y;
+        }
+        skyIrr.multiplyScalar((Math.PI / weight) * ENV_INTENSITY);
+        source.skyColor.copy(skyIrr).multiplyScalar(1 / Math.PI);
+        meter.current.skyLum = luminance(skyIrr);
+        meter.current.outdoor
+            .copy(skyIrr)
+            .add(source.sunColor.clone().multiplyScalar(meter.current.keyE));
+        // Windows let this sky (and sun) into the rooms.
+        daylightRooms.updateSky((dir) => sky.radianceCpu(dir).multiplyScalar(ENV_INTENSITY), sun.direction, sun.color, source.sunIntensity);
+        // Lamps follow the light: a smooth level for the room lamps, on/off for the lamp switches.
+        daylightUniforms.lampLevel.value = 1 - MathUtils.smoothstep(sun.elevation, -5, 6);
+        // Blue hour and night (the presets aim at −4° and −14°; golden hour at +6° stays unlit).
+        const lit = sun.elevation < -2;
+        if (lit !== lampsLit.current) {
+            lampsLit.current = lit;
+            useInteractive.getState().setLampDefault(lit, true);
+        }
+        // Re-capture the sky environment.
+        environment.capture();
+    }, [
+        clockTick,
+        deviceLocation,
+        environment,
+        site,
+        skyLive,
+        sky,
+        source,
+        timeOfDay,
+        timeOfDayMinutes,
+        transparent,
+        weather,
+    ]);
+    // Lamps loaded after the preset applied (items mount late, and an authored "on" default would
+    // light them by day) join the time of day; the person's own switches are left alone after.
+    useEffect(() => {
+        const known = new Set(Object.keys(useInteractive.getState().lampItems));
+        return useInteractive.subscribe((state) => {
+            // A lamp that leaves (its item unmounts) is new again when it comes back.
+            for (const id of known)
+                if (!(id in state.lampItems))
+                    known.delete(id);
+            for (const [id, indices] of Object.entries(state.lampItems)) {
+                if (known.has(id))
+                    continue;
+                known.add(id);
+                for (const index of indices) {
+                    if (state.items[id]?.controlValues[index] !== state.lampDefault)
+                        state.setControlValue(id, index, state.lampDefault);
+                }
+            }
+        });
+    }, []);
+    useEffect(() => () => {
+        environment.target?.dispose();
+        environment.pmrem?.dispose();
+        environment.dome.geometry.dispose();
+        environment.dome.material.dispose();
+    }, [environment]);
+    useFrame(({ camera }, delta) => {
+        const dt = Math.min(delta, 0.1);
+        // The ground must be fully fogged before the far plane clips it (no hard horizon line).
+        source.fogEnd = Math.min(FOG_END, camera.far * 0.9);
+        source.fogStart = Math.min(FOG_START, source.fogEnd * 0.1);
+        sky.cloudTime.value += dt;
+        // Metered exposure: the irradiance where the camera stands — outside: sun + sky; inside a
+        // room: its windows + bounce + lamps — exposed towards mid-grey with partial adaptation (dark
+        // scenes stay a bit dark), up to +2 EV indoors.
+        const { room, inside } = daylightRooms.isEnclosedAt(camera.position);
+        daylightUniforms.cameraOutside.value = inside ? 0 : 1;
+        const skyE = Math.PI * 0.45 * luminance(sky.radianceCpu(UP)) * ENV_INTENSITY;
+        // Outside, the lit rooms in view count too: a cutaway of lamplit rooms exposes for them.
+        const viewed = inside
+            ? { sceneE: daylightRooms.meter(room, skyE), roomsE: 0, illuminant: null }
+            : daylightRooms.viewedMeter(camera, meter.current.keyE + skyE, skyE, meter.current.outdoor, meter.current.skyLum);
+        const meterEV = (E, max, bias = 0) => MathUtils.clamp(Math.log2(METER_REF / Math.max(E, 1e-4)) * 0.6 + bias, -0.5, max);
+        const indoorEV = (E) => meterEV(E, INTERIOR_EV, INTERIOR_BIAS_EV);
+        const target = inside ? indoorEV(viewed.sceneE) : meterEV(viewed.sceneE, 2.2);
+        meter.current.ev += (target - meter.current.ev) * Math.min(1, dt * 3);
+        source.exposure = 2 ** meter.current.ev;
+        // Glows (window panes, lamp shades) stay out of the night exposure lift.
+        daylightUniforms.glowComp.value = 1 / 2 ** Math.max(0, meter.current.ev - 0.5);
+        daylightUniforms.emitterExpInv.value = 1 / source.exposure;
+        // Lamp light seen from outside gives back most of the exposure it gets above what those rooms
+        // meter at from inside (back to 1 indoors), so lit rooms look from out there as they do in them.
+        const lampView = inside || viewed.roomsE <= 0
+            ? 1
+            : 2 ** (-LAMP_VIEW_COMP * Math.max(0, meter.current.ev - indoorEV(viewed.roomsE)));
+        const shown = daylightRooms.lampView.value;
+        daylightRooms.lampView.value = shown + (lampView - shown) * Math.min(1, dt * 3);
+        // Eye-like chromatic adaptation (von Kries): divide out the illuminant where the camera is,
+        // partially (golden hour and lamplight keep some warmth), luminance-preserving; a bit less
+        // at night (moonlight stays blue-ish).
+        // Outside, the eye adapts towards the lit rooms in view too (by their pull on the meter).
+        const illum = (inside
+            ? daylightRooms.roomIlluminant(room, meter.current.outdoor, meter.current.skyLum)
+            : viewed.illuminant) ?? meter.current.outdoor;
+        const L = luminance(illum);
+        if (L > 1e-5) {
+            const k = WHITE_BALANCE * (1 - 0.35 * meter.current.night);
+            wbTarget.set(MathUtils.lerp(1, L / Math.max(illum.r, 1e-4), k), MathUtils.lerp(1, L / Math.max(illum.g, 1e-4), k), MathUtils.lerp(1, L / Math.max(illum.b, 1e-4), k));
+            wbTarget.clampScalar(0.5, 2);
+            wbTarget.divideScalar(0.2126 * wbTarget.x + 0.7152 * wbTarget.y + 0.0722 * wbTarget.z);
+        }
+        source.whiteBalance.lerp(wbTarget, Math.min(1, dt * 2));
+    }, -2);
+    return _jsx(SceneAtmosphere, { source: source });
+}

package/dist/components/viewer/drone-controller.d.ts

@@ -0,0 +1,15 @@
+export type DroneControllerProps = {
+    /** Freezes flight and look, e.g. while the host renders a still. */
+    paused?: boolean;
+    /** Leaves the drone: Esc, or losing the pointer lock it held. Ends the walkthrough by default. */
+    onExit?: () => void;
+};
+/**
+ * The free-flying drone camera for any scene, parametric or baked: no gravity,
+ * floor or collision, so it needs no collider. Picks up from the current camera
+ * pose. Pointer lock drives look (click the canvas to lock); WASD / arrows move
+ * along the view, Space or E rises, Q or Ctrl sinks, Shift boosts, Alt slows,
+ * P frees the cursor (click or P resumes) and Esc leaves.
+ */
+export declare function DroneController({ paused, onExit }: DroneControllerProps): null;
+//# sourceMappingURL=drone-controller.d.ts.map

package/dist/components/viewer/drone-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drone-controller.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/drone-controller.tsx"],"names":[],"mappings":"AAsCA,MAAM,MAAM,oBAAoB,GAAG;IACjC,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kGAAkG;IAClG,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAc,EAAE,MAAM,EAAE,EAAE,oBAAoB,QAyK/E"}

package/dist/components/viewer/drone-controller.js

@@ -0,0 +1,194 @@
+'use client';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useRef } from 'react';
+import { Vector3 } from 'three';
+import { createDroneInput, DRONE_SLOW_MULTIPLIER, droneInputForKey, readDroneInput, seedDroneLook, stepDroneFlight, turnFirstPersonLook, } from '../../lib/drone-flight';
+import useViewer from '../../store/use-viewer';
+import { WALKTHROUGH_FOV } from './glb-walkthrough-controller';
+import { applyWalkthroughCameraClipping } from './viewer-camera';
+const TYPING_TARGET = 'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="combobox"], [role="textbox"], [role="dialog"], [role="alertdialog"]';
+function isTypingTarget(target) {
+    const element = target;
+    return !!element && (element.isContentEditable === true || !!element.closest?.(TYPING_TARGET));
+}
+function requestLock(canvas) {
+    // The request can reject asynchronously (the browser's re-lock cooldown);
+    // clicking the canvas asks again.
+    const result = canvas.requestPointerLock?.();
+    if (result && typeof result.catch === 'function')
+        result.catch(() => { });
+}
+function exitWalkthrough() {
+    useViewer.getState().setWalkthroughMode(false);
+}
+/**
+ * The free-flying drone camera for any scene, parametric or baked: no gravity,
+ * floor or collision, so it needs no collider. Picks up from the current camera
+ * pose. Pointer lock drives look (click the canvas to lock); WASD / arrows move
+ * along the view, Space or E rises, Q or Ctrl sinks, Shift boosts, Alt slows,
+ * P frees the cursor (click or P resumes) and Esc leaves.
+ */
+export function DroneController({ paused = false, onExit }) {
+    const camera = useThree((state) => state.camera);
+    const gl = useThree((state) => state.gl);
+    const lookRef = useRef({ yaw: 0, pitch: 0 });
+    const heldKeysRef = useRef(new Set());
+    const inputRef = useRef(createDroneInput());
+    const velocityRef = useRef(new Vector3());
+    const suspendRef = useRef(false);
+    const pausedRef = useRef(paused);
+    const onExitRef = useRef(onExit);
+    const entryPoseRef = useRef(null);
+    useEffect(() => {
+        pausedRef.current = paused;
+    }, [paused]);
+    useEffect(() => {
+        onExitRef.current = onExit;
+    }, [onExit]);
+    // First person needs foreshortening: fly a perspective camera, and give the
+    // projection back on exit.
+    useEffect(() => {
+        const previousMode = useViewer.getState().cameraMode;
+        if (previousMode === 'orthographic')
+            useViewer.getState().setCameraMode('perspective');
+        return () => {
+            if (previousMode === 'orthographic')
+                useViewer.getState().setCameraMode('orthographic');
+        };
+    }, []);
+    // Take off from the pose the camera had on entry. Leaving orthographic swaps
+    // in a fresh perspective camera, which inherits that pose.
+    useEffect(() => {
+        const entry = entryPoseRef.current;
+        if (!entry) {
+            entryPoseRef.current = {
+                camera,
+                position: camera.position.clone(),
+                quaternion: camera.quaternion.clone(),
+            };
+        }
+        else if (entry.camera !== camera) {
+            camera.position.copy(entry.position);
+            camera.quaternion.copy(entry.quaternion);
+            camera.updateMatrixWorld(true);
+        }
+        seedDroneLook(lookRef.current, camera.quaternion);
+        velocityRef.current.set(0, 0, 0);
+    }, [camera]);
+    useEffect(() => {
+        const perspective = camera;
+        if (!perspective.isPerspectiveCamera)
+            return;
+        const previousFov = perspective.fov;
+        perspective.fov = WALKTHROUGH_FOV;
+        perspective.updateProjectionMatrix();
+        const restoreClipping = applyWalkthroughCameraClipping(perspective);
+        return () => {
+            restoreClipping();
+            perspective.fov = previousFov;
+            perspective.updateProjectionMatrix();
+        };
+    }, [camera]);
+    useEffect(() => {
+        const canvas = gl.domElement;
+        const heldKeys = heldKeysRef.current;
+        let wasLocked = false;
+        const exit = () => (onExitRef.current ?? exitWalkthrough)();
+        // Keyboard focus may still sit on the button that started the flight, where
+        // Space would press it again.
+        const activeElement = document.activeElement;
+        if (activeElement instanceof HTMLElement && !canvas.contains(activeElement)) {
+            activeElement.blur();
+        }
+        const onMouseMove = (event) => {
+            if (document.pointerLockElement !== canvas || pausedRef.current)
+                return;
+            turnFirstPersonLook(lookRef.current, event.movementX, event.movementY, heldKeys.has('AltLeft') || heldKeys.has('AltRight') ? DRONE_SLOW_MULTIPLIER : 1);
+        };
+        const onClick = () => {
+            if (document.pointerLockElement !== canvas)
+                requestLock(canvas);
+        };
+        const onKeyDown = (event) => {
+            if (isTypingTarget(event.target))
+                return;
+            if (event.code === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                exit();
+                return;
+            }
+            // P toggles a cursor pause: frees the pointer without leaving the drone —
+            // e.g. for an OS screenshot, which needs a movable cursor.
+            if (event.code === 'KeyP') {
+                event.preventDefault();
+                event.stopPropagation();
+                if (document.pointerLockElement === canvas) {
+                    suspendRef.current = true;
+                    heldKeys.clear();
+                    useViewer.getState().setWalkthroughSuspended(true);
+                    document.exitPointerLock();
+                }
+                else if (suspendRef.current) {
+                    requestLock(canvas);
+                }
+                return;
+            }
+            if (!droneInputForKey(event.code))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            // Paused, or a system shortcut (⌘⇧4 screenshot): the drone holds still.
+            if (suspendRef.current || event.metaKey)
+                return;
+            heldKeys.add(event.code);
+        };
+        const onKeyUp = (event) => {
+            heldKeys.delete(event.code);
+        };
+        const onBlur = () => heldKeys.clear();
+        const onPointerLockChange = () => {
+            if (document.pointerLockElement === canvas) {
+                wasLocked = true;
+                suspendRef.current = false;
+                useViewer.getState().setWalkthroughSuspended(false);
+            }
+            else if (suspendRef.current) {
+                // Deliberately released (P) — keep flying once resumed.
+            }
+            else if (wasLocked) {
+                // Esc while locked: the browser releases the pointer and swallows the key.
+                exit();
+            }
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        canvas.addEventListener('click', onClick);
+        document.addEventListener('keydown', onKeyDown, true);
+        document.addEventListener('keyup', onKeyUp, true);
+        window.addEventListener('blur', onBlur);
+        document.addEventListener('pointerlockchange', onPointerLockChange);
+        // The toggle that mounted the drone is a user gesture, so the lock is
+        // usually granted straight away; the canvas click covers a refusal.
+        if (document.pointerLockElement !== canvas)
+            requestLock(canvas);
+        return () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            canvas.removeEventListener('click', onClick);
+            document.removeEventListener('keydown', onKeyDown, true);
+            document.removeEventListener('keyup', onKeyUp, true);
+            window.removeEventListener('blur', onBlur);
+            document.removeEventListener('pointerlockchange', onPointerLockChange);
+            heldKeys.clear();
+            useViewer.getState().setWalkthroughSuspended(false);
+            if (document.pointerLockElement === canvas)
+                document.exitPointerLock();
+        };
+    }, [gl]);
+    useFrame((_, delta) => {
+        if (pausedRef.current)
+            return;
+        readDroneInput(heldKeysRef.current, inputRef.current);
+        stepDroneFlight(camera, lookRef.current, inputRef.current, velocityRef.current, delta);
+    }, 2.5);
+    return null;
+}