viewer rendering canvas & scene

apps/editor/components/editor.tsx

@@ -1,32 +1,7 @@
 "use client";
 
-import { Environment, OrbitControls } from "@react-three/drei";
-import { Canvas, ThreeToJSXElements } from "@react-three/fiber";
-
-import { extend } from "@react-three/fiber";
-import * as THREE from "three/webgpu";
-import { SceneRenderer } from "./renderers/scene-renderer";
-
-declare module "@react-three/fiber" {
-  interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
-}
-
-extend(THREE as any);
+import { Viewer } from "@pascal-app/viewer";
 
 export default function Editor() {
-  return (
-    <Canvas
-      className={"bg-[#303035]"}
-      gl={async (props) => {
-        const renderer = new THREE.WebGPURenderer(props as any);
-        await renderer.init();
-        return renderer;
-      }}
-      shadows
-    >
-      <OrbitControls />
-      <Environment preset="sunset" />
-      <SceneRenderer />
-    </Canvas>
-  );
+  return <Viewer />;
 }

apps/editor/components/renderers/scene-renderer.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import { AnyNode, LevelNode, useScene, WallNode } from "@pascal-app/core";
-import { useRef } from "react";
-import * as THREE from "three/webgpu";
-
-export const SceneRenderer = () => {
-  const rootNodes = useScene((state) => state.rootNodeIds);
-
-  return rootNodes.map((nodeId) => (
-    <NodeRenderer key={nodeId} nodeId={nodeId} />
-  ));
-};
-
-const NodeRenderer = ({ nodeId }: { nodeId: AnyNode["id"] }) => {
-  const node = useScene((state) => state.nodes[nodeId]);
-
-  if (!node) return null;
-
-  return (
-    <>
-      {node.type === "level" && <LevelRenderer node={node} />}
-      {/* {node.type === "item" && <ItemRenderer node={node} />} */}
-      {node.type === "wall" && <WallRenderer node={node} />}
-    </>
-  );
-};
-
-const LevelRenderer = ({ node }: { node: LevelNode }) => {
-  const ref = useRef<THREE.Group>(null!);
-
-  // useRegistry(node.id, node.type, ref);
-  return (
-    <group ref={ref}>
-      <mesh receiveShadow>
-        <boxGeometry args={[10, 0.1, 10]} />
-        <meshStandardMaterial color="orange" />
-      </mesh>
-      {node.children.map((childId) => (
-        <NodeRenderer key={childId} nodeId={childId} />
-      ))}
-    </group>
-  );
-};
-
-const WallRenderer = ({ node }: { node: WallNode }) => {
-  const ref = useRef<THREE.Mesh>(null!);
-  console.log("node", node);
-
-  // useRegistry(node.id, "wall", ref);
-
-  return (
-    <mesh ref={ref} castShadow receiveShadow>
-      {/* WallSystem will replace this geometry in the next frame */}
-      <boxGeometry args={[1, 2, 0.1]} />
-      <meshStandardMaterial color="lightgray" />
-
-      {/* If you want windows to be inside the wall's local coordinate system:
-         render children here. 
-      */}
-      {/* {node.children.map((childId) => (
-        <NodeRenderer key={childId} nodeId={childId} />
-      ))} */}
-    </mesh>
-  );
-};

apps/editor/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@pascal-app/core": "*",
+    "@pascal-app/viewer": "*",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "@react-three/uikit-lucide": "^1.0.60",