Merge remote-tracking branch 'origin/main' into feat/editor-ux-rendering-placement

packages/nodes/src/item/renderer.tsx

@@ -3,6 +3,7 @@
 import {
   type AnimationEffect,
   type AnyNodeId,
+  getScaledDimensions,
   type Interactive,
   type ItemNode,
   type LightEffect,
@@ -92,17 +93,25 @@ export const ItemRenderer = ({ node: storeNode }: { node: ItemNode }) => {
     () => (liveOverrides ? ({ ...storeNode, ...liveOverrides } as ItemNode) : storeNode),
     [storeNode, liveOverrides],
   )
+  const roomClearPreview =
+    (node as ItemNode & { roomClearPreview?: unknown }).roomClearPreview === true
 
   const content = (
     <group position={node.position} ref={ref} rotation={node.rotation} visible={node.visible}>
-      <ErrorBoundary fallback={<BrokenItemFallback node={node} />}>
-        <Suspense fallback={<PreviewModel node={node} />}>
-          <ModelRenderer node={node} />
-        </Suspense>
-      </ErrorBoundary>
-      {node.children?.map((childId) => (
-        <NodeRenderer key={childId} nodeId={childId} />
-      ))}
+      {roomClearPreview ? (
+        <ClearPreviewModel node={node} />
+      ) : (
+        <>
+          <ErrorBoundary fallback={<BrokenItemFallback node={node} />}>
+            <Suspense fallback={<PreviewModel node={node} />}>
+              <ModelRenderer node={node} />
+            </Suspense>
+          </ErrorBoundary>
+          {node.children?.map((childId) => (
+            <NodeRenderer key={childId} nodeId={childId} />
+          ))}
+        </>
+      )}
     </group>
   )
 
@@ -141,6 +150,26 @@ const PreviewModel = ({ node }: { node: ItemNode }) => {
   )
 }
 
+const ClearPreviewModel = ({ node }: { node: ItemNode }) => {
+  const shading = useViewer((s) => s.shading)
+  const [w, h, d] = getScaledDimensions(node)
+  const material = useMemo(() => {
+    const next = createDefaultMaterial('#ef4444', 1, shading) as MutableMaterial
+    next.depthTest = false
+    next.opacity = 0.35
+    next.transparent = true
+    next.wireframe = true
+    next.needsUpdate = true
+    return next
+  }, [shading])
+
+  return (
+    <mesh material={material} position-y={h / 2}>
+      <boxGeometry args={[w, h, d]} />
+    </mesh>
+  )
+}
+
 const multiplyScales = (
   a: [number, number, number],
   b: [number, number, number],