scans and ref image

packages/viewer/src/components/renderers/guide/guide-renderer.tsx

@@ -0,0 +1,61 @@
+import { type GuideNode, useRegistry } from '@pascal-app/core'
+import { Suspense, useMemo, useRef } from 'react'
+import { DoubleSide, type Group, type Texture, TextureLoader } from 'three'
+import { float, texture } from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { useLoader } from '@react-three/fiber'
+import { useAssetUrl } from '../../../hooks/use-asset-url'
+
+export const GuideRenderer = ({ node }: { node: GuideNode }) => {
+  const ref = useRef<Group>(null!)
+  useRegistry(node.id, 'guide', ref)
+
+  const resolvedUrl = useAssetUrl(node.url)
+
+  return (
+    <group
+      ref={ref}
+      position={node.position}
+      rotation={[0, node.rotation[1], 0]}
+    >
+      {resolvedUrl && (
+        <Suspense>
+          <GuidePlane url={resolvedUrl} scale={node.scale} opacity={node.opacity} />
+        </Suspense>
+      )}
+    </group>
+  )
+}
+
+const GuidePlane = ({ url, scale, opacity }: { url: string; scale: number; opacity: number }) => {
+  const tex = useLoader(TextureLoader, url) as Texture
+
+  const { width, height, material } = useMemo(() => {
+    const img = tex.image as HTMLImageElement | ImageBitmap
+    const w = img.width || 1
+    const h = img.height || 1
+    const aspect = w / h
+
+    // Default: 10 meters wide, height from aspect ratio
+    const planeWidth = 10 * scale
+    const planeHeight = (10 / aspect) * scale
+
+    const normalizedOpacity = opacity / 100
+
+    const mat = new MeshBasicNodeMaterial({
+      transparent: true,
+      colorNode: texture(tex),
+      opacityNode: float(normalizedOpacity),
+      side: DoubleSide,
+      depthWrite: false,
+    })
+
+    return { width: planeWidth, height: planeHeight, material: mat }
+  }, [tex, scale, opacity])
+
+  return (
+    <mesh rotation={[-Math.PI / 2, 0, 0]} material={material}>
+      <planeGeometry args={[width, height]} />
+    </mesh>
+  )
+}

packages/viewer/src/components/renderers/node-renderer.tsx

@@ -3,8 +3,10 @@
 import { type AnyNode, useScene } from '@pascal-app/core'
 import { BuildingRenderer } from './building/building-renderer'
 import { CeilingRenderer } from './ceiling/ceiling-renderer'
+import { GuideRenderer } from './guide/guide-renderer'
 import { ItemRenderer } from './item/item-renderer'
 import { LevelRenderer } from './level/level-renderer'
+import { ScanRenderer } from './scan/scan-renderer'
 import { SlabRenderer } from './slab/slab-renderer'
 import { WallRenderer } from './wall/wall-renderer'
 import { ZoneRenderer } from './zone/zone-renderer'
@@ -23,6 +25,8 @@ export const NodeRenderer = ({ nodeId }: { nodeId: AnyNode['id'] }) => {
       {node.type === 'slab' && <SlabRenderer node={node} />}
       {node.type === 'wall' && <WallRenderer node={node} />}
       {node.type === 'zone' && <ZoneRenderer node={node} />}
+      {node.type === 'scan' && <ScanRenderer node={node} />}
+      {node.type === 'guide' && <GuideRenderer node={node} />}
     </>
   )
 }

packages/viewer/src/components/renderers/scan/scan-renderer.tsx

@@ -0,0 +1,64 @@
+import { type ScanNode, useRegistry } from '@pascal-app/core'
+import { Clone } from '@react-three/drei/core/Clone'
+import { Suspense, useMemo, useRef } from 'react'
+import type { Group, Material, Mesh } from 'three'
+import { useAssetUrl } from '../../../hooks/use-asset-url'
+import { useGLTFKTX2 } from '../../../hooks/use-gltf-ktx2'
+
+export const ScanRenderer = ({ node }: { node: ScanNode }) => {
+  const ref = useRef<Group>(null!)
+  useRegistry(node.id, 'scan', ref)
+
+  const resolvedUrl = useAssetUrl(node.url)
+
+  return (
+    <group
+      ref={ref}
+      position={node.position}
+      rotation={node.rotation}
+      scale={[node.scale, node.scale, node.scale]}
+    >
+      {resolvedUrl && (
+        <Suspense>
+          <ScanModel url={resolvedUrl} opacity={node.opacity} />
+        </Suspense>
+      )}
+    </group>
+  )
+}
+
+const ScanModel = ({ url, opacity }: { url: string; opacity: number }) => {
+  const { scene } = useGLTFKTX2(url)
+
+  useMemo(() => {
+    const normalizedOpacity = opacity / 100
+    const isTransparent = normalizedOpacity < 1
+
+    const updateMaterial = (material: Material) => {
+      if (isTransparent) {
+        material.transparent = true
+        material.opacity = normalizedOpacity
+      } else {
+        material.transparent = false
+        material.opacity = 1
+      }
+      material.needsUpdate = true
+    }
+
+    scene.traverse((child) => {
+      if ((child as Mesh).isMesh) {
+        const mesh = child as Mesh
+
+        if (Array.isArray(mesh.material)) {
+          mesh.material.forEach((material) => {
+            updateMaterial(material)
+          })
+        } else {
+          updateMaterial(mesh.material)
+        }
+      }
+    })
+  }, [scene, opacity])
+
+  return <Clone object={scene} />
+}

packages/viewer/src/hooks/use-asset-url.ts

@@ -0,0 +1,23 @@
+import { loadAssetUrl } from '@pascal-app/core'
+import { useEffect, useState } from 'react'
+
+/**
+ * Resolves an asset:// URL to a blob URL for use with Three.js loaders.
+ * Returns null while loading or if resolution fails.
+ */
+export function useAssetUrl(url: string): string | null {
+  const [resolved, setResolved] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setResolved(null)
+    loadAssetUrl(url).then((result) => {
+      if (!cancelled) setResolved(result)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [url])
+
+  return resolved
+}

packages/viewer/src/hooks/use-gltf-ktx2.tsx

@@ -0,0 +1,19 @@
+import { useGLTF } from "@react-three/drei"
+import { useThree } from "@react-three/fiber"
+import { KTX2Loader } from "three/examples/jsm/Addons.js"
+import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js"
+
+const ktx2LoaderInstance = new KTX2Loader()
+ktx2LoaderInstance.setTranscoderPath('https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/basis/')
+
+const useGLTFKTX2 = (path: string) => {
+  const gl = useThree((state) => state.gl)
+
+  return useGLTF(path, true, true, (loader) => {
+    ktx2LoaderInstance.detectSupport(gl)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    loader.setKTX2Loader(ktx2LoaderInstance as any)
+    loader.setMeshoptDecoder(MeshoptDecoder)
+  })
+}
+export { useGLTFKTX2 }