zone rendering

packages/core/src/hooks/scene-registry/scene-registry.ts

@@ -1,5 +1,5 @@
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect } from "react";
-import type * as THREE from 'three'
+import type * as THREE from "three";
 
 export const sceneRegistry = {
   // Master lookup: ID -> Object3D
@@ -13,8 +13,9 @@ export const sceneRegistry = {
     wall: new Set<string>(),
     item: new Set<string>(),
     slab: new Set<string>(),
+    zone: new Set<string>(),
   },
-}
+};
 
 export function useRegistry(
   id: string,
@@ -22,19 +23,19 @@ export function useRegistry(
   ref: React.RefObject<THREE.Object3D>,
 ) {
   useLayoutEffect(() => {
-    const obj = ref.current
+    const obj = ref.current;
-    if (!obj) return
+    if (!obj) return;
 
     // 1. Add to master map
-    sceneRegistry.nodes.set(id, obj)
+    sceneRegistry.nodes.set(id, obj);
 
     // 2. Add to type-specific set
-    sceneRegistry.byType[type].add(id)
+    sceneRegistry.byType[type].add(id);
 
     // 4. Cleanup when component unmounts
     return () => {
-      sceneRegistry.nodes.delete(id)
+      sceneRegistry.nodes.delete(id);
-      sceneRegistry.byType[type].delete(id)
+      sceneRegistry.byType[type].delete(id);
-    }
+    };
-  }, [id, type, ref])
+  }, [id, type, ref]);
 }

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

@@ -1,12 +1,14 @@
-import { type LevelNode, useRegistry } from '@pascal-app/core'
+import { type LevelNode, useRegistry, useScene } from "@pascal-app/core";
-import { useRef } from 'react'
+import { useRef } from "react";
-import type { Group } from 'three'
+import type { Group } from "three";
-import { NodeRenderer } from '../node-renderer'
+import { useShallow } from "zustand/shallow";
+import { NodeRenderer } from "../node-renderer";
+import { ZoneRenderer } from "../zone/zone-renderer";
 
 export const LevelRenderer = ({ node }: { node: LevelNode }) => {
-  const ref = useRef<Group>(null!)
+  const ref = useRef<Group>(null!);
 
-  useRegistry(node.id, node.type, ref)
+  useRegistry(node.id, node.type, ref);
 
   return (
     <group ref={ref}>
@@ -17,6 +19,17 @@ export const LevelRenderer = ({ node }: { node: LevelNode }) => {
       {node.children.map((childId) => (
         <NodeRenderer key={childId} nodeId={childId} />
       ))}
+      <LevelZones levelId={node.id} />
     </group>
-  )
+  );
-}
+};
+
+const LevelZones = ({ levelId }: { levelId: LevelNode["id"] }) => {
+  const zoneIds = useScene(
+    useShallow((s) =>
+      s.zoneIds.filter((id) => s.zones[id]?.levelId === levelId),
+    ),
+  );
+
+  return zoneIds.map((zoneId) => <ZoneRenderer key={zoneId} zoneId={zoneId} />);
+};

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

@@ -1,10 +1,12 @@
-'use client'
+"use client";
 
-import { useScene } from '@pascal-app/core'
+import { useScene } from "@pascal-app/core";
-import { NodeRenderer } from './node-renderer'
+import { NodeRenderer } from "./node-renderer";
 
 export const SceneRenderer = () => {
-  const rootNodes = useScene((state) => state.rootNodeIds)
+  const rootNodes = useScene((state) => state.rootNodeIds);
 
-  return rootNodes.map((nodeId) => <NodeRenderer key={nodeId} nodeId={nodeId} />)
+  return rootNodes.map((nodeId) => (
-}
+    <NodeRenderer key={nodeId} nodeId={nodeId} />
+  ));
+};

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

@@ -0,0 +1,17 @@
+import { useRegistry, type Zone } from "@pascal-app/core";
+
+import { useRef } from "react";
+import type { Group } from "three";
+
+export const ZoneRenderer = ({ zoneId }: { zoneId: Zone["id"] }) => {
+  const ref = useRef<Group>(null!);
+  useRegistry(zoneId, "zone", ref);
+
+  return (
+    <mesh ref={ref}>
+      {/* <shapeGeometry /> */}
+      <boxGeometry args={[1, 1, 1]} />
+      <meshBasicNodeMaterial color="pink" />
+    </mesh>
+  );
+};