@pascal-app/editor 0.5.1 → 0.7.0

package/src/components/editor/site-edge-labels.tsx

@@ -20,12 +20,18 @@ function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
 }
 
 export function SiteEdgeLabels() {
-  const rootNodeIds = useScene((state) => state.rootNodeIds)
-  const nodes = useScene((state) => state.nodes)
+  // Narrow subscription to just the site node — subscribing to the full
+  // s.nodes dict re-rendered this on every wall/level mutation even though
+  // the site itself rarely changes.
+  const siteNode = useScene((state) => {
+    const firstRoot = state.rootNodeIds[0]
+    if (!firstRoot) return null
+    const node = state.nodes[firstRoot]
+    return node?.type === 'site' ? (node as SiteNode) : null
+  })
   const unit = useViewer((state) => state.unit)
   const theme = useViewer((state) => state.theme)
 
-  const siteNode = rootNodeIds[0] ? (nodes[rootNodeIds[0]] as SiteNode) : null
   const siteNodeId = siteNode?.id
 
   const isNight = theme === 'dark'

package/src/components/editor/thumbnail-generator.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { emitter, useScene } from '@pascal-app/core'
-import { SSGI_PARAMS, snapLevelsToTruePositions } from '@pascal-app/viewer'
+import { emitter, sceneRegistry, useScene } from '@pascal-app/core'
+import { SSGI_PARAMS, snapLevelsToTruePositions, useViewer } from '@pascal-app/viewer'
+import type { CameraControls } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
 import * as THREE from 'three'
@@ -29,14 +30,24 @@ const THUMBNAIL_WIDTH = 1920
 const THUMBNAIL_HEIGHT = 1080
 const AUTO_SAVE_DELAY = 10_000
 
+export interface SnapshotCameraData {
+  position: [number, number, number]
+  target: [number, number, number] | null
+  type?: 'perspective' | 'orthographic'
+  zoom?: number
+  captureMode?: 'standard' | 'viewport' | 'area'
+  resolution?: { w: number; h: number }
+}
+
 interface ThumbnailGeneratorProps {
-  onThumbnailCapture?: (blob: Blob) => void
+  onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
 }
 
 export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorProps) => {
   const gl = useThree((state) => state.gl)
   const scene = useThree((state) => state.scene)
   const mainCamera = useThree((state) => state.camera)
+  const controls = useThree((state) => state.controls) as CameraControls | null
   const isGenerating = useRef(false)
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const pendingAutoRef = useRef(false)
@@ -50,7 +61,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
     onThumbnailCaptureRef.current = onThumbnailCapture
   }, [onThumbnailCapture])
 
-  // Build the thumbnail camera, SSGI pipeline, and render target once — reused on every capture.
+  // Build the thumbnail camera, SSGI pipeline, and render target once, reused on every capture.
   useEffect(() => {
     const cam = new THREE.PerspectiveCamera(60, THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT, 0.1, 1000)
     cam.layers.disable(EDITOR_LAYER)
@@ -64,7 +75,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         if (!mounted) return
 
         // pass() handles MRT internally for all material types, including custom
-        // shaders — unlike renderer.setMRT() which crashes on non-NodeMaterials.
+        // shaders, unlike renderer.setMRT() which crashes on non-NodeMaterials.
         // pass() also respects camera.layers, so EDITOR_LAYER objects are filtered.
         const scenePass = pass(scene, cam)
         scenePass.setMRT(
@@ -106,15 +117,15 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         const ao = (denoisePass as any).r
         const finalOutput = vec4(scenePassColor.rgb.mul(ao), scenePassColor.a)
 
-        // FXAA requires a texture node as input; convertToTexture renders finalOutput
-        // into an intermediate RT so FXAA can sample it with neighbour UV offsets.
+        // FXAA requires a texture node as input, convertToTexture renders finalOutput
+        // into an intermediate RT so FXAA can sample it with neighbor UV offsets.
         const aaOutput = fxaa(convertToTexture(finalOutput))
 
         const pipeline = new RenderPipeline(gl as unknown as WebGPURenderer)
         pipeline.outputNode = aaOutput
         pipelineRef.current = pipeline
 
-        // Dedicated render target — pipeline outputs here instead of the canvas,
+        // Dedicated render target, pipeline outputs here instead of the canvas,
         // so R3F's main render loop can never overwrite our capture.
         const { width, height } = gl.domElement
         renderTargetRef.current = new RenderTarget(width, height, { depthBuffer: true })
@@ -137,178 +148,335 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
     }
   }, [gl, scene])
 
-  const generate = useCallback(async () => {
-    if (isGenerating.current) return
-    if (!onThumbnailCaptureRef.current) return
-
-    isGenerating.current = true
+  const generate = useCallback(
+    async (
+      snapLevels: boolean,
+      captureMode?: 'standard' | 'viewport' | 'area',
+      cropRegion?: { x: number; y: number; width: number; height: number },
+    ) => {
+      if (isGenerating.current) return
+      if (!onThumbnailCaptureRef.current) return
 
-    try {
-      const thumbnailCamera = thumbnailCameraRef.current
-      if (!thumbnailCamera) return
+      isGenerating.current = true
 
-      // Copy the main camera's transform and projection so the thumbnail
-      // matches exactly what the user sees in the viewport.
-      thumbnailCamera.position.copy(mainCamera.position)
-      thumbnailCamera.quaternion.copy(mainCamera.quaternion)
-      if (mainCamera instanceof THREE.PerspectiveCamera) {
-        thumbnailCamera.fov = mainCamera.fov
-        thumbnailCamera.near = mainCamera.near
-        thumbnailCamera.far = mainCamera.far
-      }
-      const { width, height } = gl.domElement
-      thumbnailCamera.aspect = width / height
-      thumbnailCamera.updateProjectionMatrix()
+      try {
+        const thumbnailCamera = thumbnailCameraRef.current
+        if (!thumbnailCamera) return
+
+        // Copy the main camera's transform and projection so the thumbnail
+        // matches exactly what the user sees in the viewport.
+        thumbnailCamera.position.copy(mainCamera.position)
+        thumbnailCamera.quaternion.copy(mainCamera.quaternion)
+        if (mainCamera instanceof THREE.PerspectiveCamera) {
+          thumbnailCamera.fov = mainCamera.fov
+          thumbnailCamera.near = mainCamera.near
+          thumbnailCamera.far = mainCamera.far
+        }
+        const { width, height } = gl.domElement
+        thumbnailCamera.aspect = width / height
+        thumbnailCamera.updateProjectionMatrix()
+
+        // Capture camera data for snapshot storage.
+        const pos = mainCamera.position
+        let tgt: [number, number, number] | null = null
+        if (controls && 'getTarget' in controls) {
+          const v = new THREE.Vector3()
+          ;(controls as any).getTarget(v)
+          tgt = [v.x, v.y, v.z]
+        }
+        const isOrtho = mainCamera instanceof THREE.OrthographicCamera
+        const cameraData: SnapshotCameraData = {
+          position: [pos.x, pos.y, pos.z],
+          target: tgt,
+          type: isOrtho ? 'orthographic' : 'perspective',
+          ...(isOrtho && { zoom: (mainCamera as THREE.OrthographicCamera).zoom }),
+        }
 
-      const restoreLevels = snapLevelsToTruePositions()
+        // For auto-save, snap levels to stacked positions and reset levelMode.
+        let restoreLevelMode: (() => void) | null = null
+        let restoreLevels: () => void = () => {}
+        if (snapLevels) {
+          const prevMode = useViewer.getState().levelMode
+          if (prevMode !== 'stacked') {
+            useViewer.getState().setLevelMode('stacked')
+            restoreLevelMode = () => useViewer.getState().setLevelMode(prevMode)
+          }
+          restoreLevels = snapLevelsToTruePositions()
+        }
 
-      let blob: Blob
+        // Hide scan and guide nodes directly so they are excluded from the
+        // thumbnail regardless of whether ScanSystem or GuideSystem listeners are
+        // registered. Returns a function that restores the original visibility.
+        const restoreNodeVisibility = (() => {
+          const saved = new Map<THREE.Object3D, boolean>()
+          for (const type of ['scan', 'guide'] as const) {
+            const ids = sceneRegistry.byType[type]
+            ids.forEach((id) => {
+              const node = sceneRegistry.nodes.get(id)
+              if (node) {
+                saved.set(node, node.visible)
+                node.visible = false
+              }
+            })
+          }
+          return () => {
+            saved.forEach((wasVisible, node) => {
+              node.visible = wasVisible
+            })
+          }
+        })()
 
-      if (pipelineRef.current && renderTargetRef.current) {
-        const rt = renderTargetRef.current
+        let blob: Blob
 
-        // Resize RT if the canvas dimensions changed
-        if (rt.width !== width || rt.height !== height) {
-          rt.setSize(width, height)
-        }
+        if (pipelineRef.current && renderTargetRef.current) {
+          const rt = renderTargetRef.current
 
-        const renderer = gl as unknown as WebGPURenderer
-
-        // Swap selected-item materials back to originals for the capture,
-        // then re-apply highlights immediately after.
-        emitter.emit('thumbnail:before-capture', undefined)
-        ;(renderer as any).setClearAlpha(0)
-        renderer.setRenderTarget(rt)
-        pipelineRef.current.render()
-        renderer.setRenderTarget(null)
-        emitter.emit('thumbnail:after-capture', undefined)
-
-        // Restore level positions immediately after the render — before the async GPU readback.
-        restoreLevels()
-
-        // Read pixels from the RT asynchronously.
-        // WebGPU copyTextureToBuffer aligns each row to 256 bytes, so we must
-        // depad the rows before constructing ImageData.
-        const pixels = (await (renderer as any).readRenderTargetPixelsAsync(
-          rt,
-          0,
-          0,
-          width,
-          height,
-        )) as Uint8Array
-
-        const actualBytesPerRow = width * 4
-        const paddedBytesPerRow = Math.ceil(actualBytesPerRow / 256) * 256
-        let tightPixels: Uint8ClampedArray
-        if (paddedBytesPerRow === actualBytesPerRow) {
-          // No padding — use the buffer directly
-          tightPixels = new Uint8ClampedArray(pixels.buffer, pixels.byteOffset, pixels.byteLength)
-        } else {
-          // Depad rows
-          tightPixels = new Uint8ClampedArray(width * height * 4)
-          for (let row = 0; row < height; row++) {
-            tightPixels.set(
-              pixels.subarray(row * paddedBytesPerRow, row * paddedBytesPerRow + actualBytesPerRow),
-              row * actualBytesPerRow,
-            )
+          // Resize RT if the canvas dimensions changed.
+          if (rt.width !== width || rt.height !== height) {
+            rt.setSize(width, height)
           }
-        }
 
-        // Crop to thumbnail aspect ratio and draw to offscreen canvas
-        const srcAspect = width / height
-        const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
-        let sx = 0,
-          sy = 0,
-          sWidth = width,
-          sHeight = height
-        if (srcAspect > dstAspect) {
-          sWidth = Math.round(height * dstAspect)
-          sx = Math.round((width - sWidth) / 2)
-        } else if (srcAspect < dstAspect) {
-          sHeight = Math.round(width / dstAspect)
-          sy = Math.round((height - sHeight) / 2)
-        }
+          const renderer = gl as unknown as WebGPURenderer
+
+          // Notify other systems (wall cutouts, selection manager) to restore
+          // their overrides before capture and re-apply them after.
+          emitter.emit('thumbnail:before-capture', undefined)
+          ;(renderer as any).setClearAlpha(0)
+          renderer.setRenderTarget(rt)
+          pipelineRef.current.render()
+          renderer.setRenderTarget(null)
+          emitter.emit('thumbnail:after-capture', undefined)
+
+          // Restore level positions, levelMode, and node visibility immediately after the
+          // render, before the async GPU readback.
+          restoreLevels()
+          restoreLevelMode?.()
+          restoreNodeVisibility()
+
+          // Read pixels from the RT asynchronously.
+          // WebGPU copyTextureToBuffer aligns each row to 256 bytes, so we must
+          // depad the rows before constructing ImageData.
+          const pixels = (await (renderer as any).readRenderTargetPixelsAsync(
+            rt,
+            0,
+            0,
+            width,
+            height,
+          )) as Uint8Array
+
+          const actualBytesPerRow = width * 4
+          const tightTotal = actualBytesPerRow * height
+          const paddedBytesPerRow = Math.ceil(actualBytesPerRow / 256) * 256
+          // Two readback shapes to handle:
+          // - WebGPU (`copyTextureToBuffer`): top-down + 256-byte row padding
+          //   when width*4 isn't already a multiple of 256.
+          // - WebGL2 fallback (iOS Chrome, etc.): tightly-packed but bottom-up
+          //   (OpenGL framebuffer convention).
+          // `isWebGPURenderer` lies — it stays true even when the renderer
+          // falls back to the WebGL backend. Inspect the actual backend
+          // instead (presence of a GPU device, or backend constructor name).
+          const backend = (renderer as any).backend
+          const isWebGPU =
+            !!backend?.device ||
+            backend?.isWebGPUBackend === true ||
+            backend?.constructor?.name === 'WebGPUBackend'
+          let tightPixels: Uint8ClampedArray
+          if (isWebGPU) {
+            // WebGPU: depad rows if needed; orientation is already top-down.
+            if (paddedBytesPerRow === actualBytesPerRow) {
+              tightPixels = new Uint8ClampedArray(
+                pixels.buffer,
+                pixels.byteOffset,
+                Math.min(pixels.byteLength, tightTotal),
+              )
+            } else {
+              tightPixels = new Uint8ClampedArray(tightTotal)
+              for (let row = 0; row < height; row++) {
+                tightPixels.set(
+                  pixels.subarray(
+                    row * paddedBytesPerRow,
+                    row * paddedBytesPerRow + actualBytesPerRow,
+                  ),
+                  row * actualBytesPerRow,
+                )
+              }
+            }
+          } else {
+            // WebGL2: tight buffer in bottom-up order — flip rows.
+            tightPixels = new Uint8ClampedArray(tightTotal)
+            for (let row = 0; row < height; row++) {
+              const srcStart = (height - 1 - row) * actualBytesPerRow
+              tightPixels.set(
+                pixels.subarray(srcStart, srcStart + actualBytesPerRow),
+                row * actualBytesPerRow,
+              )
+            }
+          }
 
-        const imageData = new ImageData(
-          tightPixels as unknown as Uint8ClampedArray<ArrayBuffer>,
-          width,
-          height,
-        )
-        const srcCanvas = new OffscreenCanvas(width, height)
-        srcCanvas.getContext('2d')!.putImageData(imageData, 0, 0)
+          const imageData = new ImageData(
+            tightPixels as unknown as Uint8ClampedArray<ArrayBuffer>,
+            width,
+            height,
+          )
+          const srcCanvas = new OffscreenCanvas(width, height)
+          srcCanvas.getContext('2d')!.putImageData(imageData, 0, 0)
+
+          let outW: number
+          let outH: number
+
+          if (captureMode === 'viewport') {
+            outW = width
+            outH = height
+            const offscreen = new OffscreenCanvas(outW, outH)
+            offscreen.getContext('2d')!.drawImage(srcCanvas, 0, 0)
+            blob = await offscreen.convertToBlob({ type: 'image/png' })
+          } else if (captureMode === 'area' && cropRegion) {
+            const sx = Math.round(cropRegion.x * width)
+            const sy = Math.round(cropRegion.y * height)
+            outW = Math.round(cropRegion.width * width)
+            outH = Math.round(cropRegion.height * height)
+            const offscreen = new OffscreenCanvas(outW, outH)
+            offscreen.getContext('2d')!.drawImage(srcCanvas, sx, sy, outW, outH, 0, 0, outW, outH)
+            blob = await offscreen.convertToBlob({ type: 'image/png' })
+          } else {
+            const srcAspect = width / height
+            const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
+            let sx = 0,
+              sy = 0,
+              sWidth = width,
+              sHeight = height
+            if (srcAspect > dstAspect) {
+              sWidth = Math.round(height * dstAspect)
+              sx = Math.round((width - sWidth) / 2)
+            } else if (srcAspect < dstAspect) {
+              sHeight = Math.round(width / dstAspect)
+              sy = Math.round((height - sHeight) / 2)
+            }
+            outW = THUMBNAIL_WIDTH
+            outH = THUMBNAIL_HEIGHT
+            const offscreen = new OffscreenCanvas(outW, outH)
+            offscreen
+              .getContext('2d')!
+              .drawImage(srcCanvas, sx, sy, sWidth, sHeight, 0, 0, outW, outH)
+            blob = await offscreen.convertToBlob({ type: 'image/png' })
+          }
 
-        const offscreen = new OffscreenCanvas(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)
-        offscreen
-          .getContext('2d')!
-          .drawImage(srcCanvas, sx, sy, sWidth, sHeight, 0, 0, THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)
+          if (captureMode !== undefined) cameraData.captureMode = captureMode
+          cameraData.resolution = { w: outW, h: outH }
+        } else {
+          // Fallback: plain render directly to the canvas.
+          emitter.emit('thumbnail:before-capture', undefined)
+          gl.render(scene, thumbnailCamera)
+          emitter.emit('thumbnail:after-capture', undefined)
+          restoreLevels()
+          restoreLevelMode?.()
+          restoreNodeVisibility()
+
+          let outW: number
+          let outH: number
+
+          if (captureMode === 'viewport') {
+            outW = width
+            outH = height
+            const offscreen = document.createElement('canvas')
+            offscreen.width = outW
+            offscreen.height = outH
+            offscreen.getContext('2d')!.drawImage(gl.domElement, 0, 0)
+            blob = await new Promise<Blob>((resolve, reject) =>
+              offscreen.toBlob(
+                (b) => (b ? resolve(b) : reject(new Error('Canvas capture failed'))),
+                'image/png',
+              ),
+            )
+          } else if (captureMode === 'area' && cropRegion) {
+            const sx = Math.round(cropRegion.x * width)
+            const sy = Math.round(cropRegion.y * height)
+            outW = Math.round(cropRegion.width * width)
+            outH = Math.round(cropRegion.height * height)
+            const offscreen = document.createElement('canvas')
+            offscreen.width = outW
+            offscreen.height = outH
+            offscreen
+              .getContext('2d')!
+              .drawImage(gl.domElement, sx, sy, outW, outH, 0, 0, outW, outH)
+            blob = await new Promise<Blob>((resolve, reject) =>
+              offscreen.toBlob(
+                (b) => (b ? resolve(b) : reject(new Error('Canvas capture failed'))),
+                'image/png',
+              ),
+            )
+          } else {
+            const srcAspect = width / height
+            const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
+            let sx = 0,
+              sy = 0,
+              sWidth = width,
+              sHeight = height
+            if (srcAspect > dstAspect) {
+              sWidth = Math.round(height * dstAspect)
+              sx = Math.round((width - sWidth) / 2)
+            } else if (srcAspect < dstAspect) {
+              sHeight = Math.round(width / dstAspect)
+              sy = Math.round((height - sHeight) / 2)
+            }
+            outW = THUMBNAIL_WIDTH
+            outH = THUMBNAIL_HEIGHT
+            const offscreen = document.createElement('canvas')
+            offscreen.width = outW
+            offscreen.height = outH
+            offscreen
+              .getContext('2d')!
+              .drawImage(gl.domElement, sx, sy, sWidth, sHeight, 0, 0, outW, outH)
+            blob = await new Promise<Blob>((resolve, reject) =>
+              offscreen.toBlob(
+                (b) => (b ? resolve(b) : reject(new Error('Canvas capture failed'))),
+                'image/png',
+              ),
+            )
+          }
 
-        blob = await offscreen.convertToBlob({ type: 'image/png' })
-      } else {
-        // Fallback: plain render directly to the canvas
-        gl.render(scene, thumbnailCamera)
-        restoreLevels()
-
-        const srcAspect = width / height
-        const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
-        let sx = 0,
-          sy = 0,
-          sWidth = width,
-          sHeight = height
-        if (srcAspect > dstAspect) {
-          sWidth = Math.round(height * dstAspect)
-          sx = Math.round((width - sWidth) / 2)
-        } else if (srcAspect < dstAspect) {
-          sHeight = Math.round(width / dstAspect)
-          sy = Math.round((height - sHeight) / 2)
+          if (captureMode !== undefined) cameraData.captureMode = captureMode
+          cameraData.resolution = { w: outW, h: outH }
         }
 
-        const offscreen = document.createElement('canvas')
-        offscreen.width = THUMBNAIL_WIDTH
-        offscreen.height = THUMBNAIL_HEIGHT
-        const ctx = offscreen.getContext('2d')!
-        ctx.drawImage(
-          gl.domElement,
-          sx,
-          sy,
-          sWidth,
-          sHeight,
-          0,
-          0,
-          THUMBNAIL_WIDTH,
-          THUMBNAIL_HEIGHT,
-        )
-
-        blob = await new Promise<Blob>((resolve, reject) =>
-          offscreen.toBlob(
-            (b) => (b ? resolve(b) : reject(new Error('Canvas capture failed'))),
-            'image/png',
-          ),
-        )
+        onThumbnailCaptureRef.current?.(blob, cameraData)
+      } catch (error) {
+        console.error('❌ Failed to generate thumbnail:', error)
+      } finally {
+        isGenerating.current = false
       }
-
-      onThumbnailCaptureRef.current?.(blob)
-    } catch (error) {
-      console.error('❌ Failed to generate thumbnail:', error)
-    } finally {
-      isGenerating.current = false
-    }
-  }, [gl, scene, mainCamera])
-
-  // Manual trigger via emitter
+    },
+    [gl, scene, mainCamera, controls],
+  )
+
+  // Thumbnail request via emitter. Two call shapes:
+  //  - user-driven capture: `{ projectId, captureMode, cropRegion }`, captures
+  //    the current pose with the supplied crop.
+  //  - auto-save capture: `{ projectId, snapLevels: true }`, snaps levels to
+  //    their true positions first for a consistent auto-thumbnail angle.
   useEffect(() => {
-    const handleGenerateThumbnail = async () => {
-      await generate()
+    if (!onThumbnailCapture) return
+
+    const handleGenerateThumbnail = async (event: {
+      captureMode?: 'standard' | 'viewport' | 'area'
+      cropRegion?: { x: number; y: number; width: number; height: number }
+      snapLevels?: boolean
+    }) => {
+      await generate(event.snapLevels === true, event.captureMode, event.cropRegion)
     }
 
     emitter.on('camera-controls:generate-thumbnail', handleGenerateThumbnail)
     return () => emitter.off('camera-controls:generate-thumbnail', handleGenerateThumbnail)
-  }, [generate])
+  }, [generate, onThumbnailCapture])
 
-  // Auto-trigger: debounced on scene changes, deferred if tab is hidden
+  // OSS adaptation: keep local debounced auto-capture behavior because the
+  // community host-side autosave hook is not part of this repo.
   useEffect(() => {
     if (!onThumbnailCapture) return
 
-    const triggerNow = () => generate()
+    const triggerNow = () => {
+      void generate(true)
+    }
 
     const scheduleOrDefer = () => {
       if (document.visibilityState === 'visible') {
@@ -341,7 +509,32 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
       unsubscribe()
       document.removeEventListener('visibilitychange', onVisibilityChange)
     }
-  }, [onThumbnailCapture, generate])
+  }, [generate, onThumbnailCapture])
+
+  // Go-to-camera: animate camera to a saved snapshot position or target.
+  useEffect(() => {
+    const handler = ({
+      position,
+      target,
+    }: {
+      position: [number, number, number]
+      target: [number, number, number]
+    }) => {
+      if (controls && 'setLookAt' in controls) {
+        ;(controls as any).setLookAt(
+          position[0],
+          position[1],
+          position[2],
+          target[0],
+          target[1],
+          target[2],
+          true,
+        )
+      }
+    }
+    emitter.on('camera:go-to-position', handler)
+    return () => emitter.off('camera:go-to-position', handler)
+  }, [controls])
 
   return null
 }