From 7a4d6e397de330e82b7b1a630c5966c6a819cdb5 Mon Sep 17 00:00:00 2001 From: wass08 Date: Thu, 15 Jan 2026 08:47:55 +0900 Subject: [PATCH] viewer rendering canvas & scene --- apps/editor/components/editor.tsx | 29 ++------------- apps/editor/package.json | 1 + bun.lock | 9 +++-- packages/viewer/package.json | 8 +++-- .../components/renderers/scene-renderer.tsx | 0 .../viewer/src/components/viewer/viewer.tsx | 36 +++++++++++++++++++ packages/viewer/src/index.ts | 2 +- 7 files changed, 52 insertions(+), 33 deletions(-) rename {apps/editor => packages/viewer/src}/components/renderers/scene-renderer.tsx (100%) create mode 100644 packages/viewer/src/components/viewer/viewer.tsx diff --git a/apps/editor/components/editor.tsx b/apps/editor/components/editor.tsx index 1fd5a8cf..ecdbd120 100644 --- a/apps/editor/components/editor.tsx +++ b/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 {} -} - -extend(THREE as any); +import { Viewer } from "@pascal-app/viewer"; export default function Editor() { - return ( - { - const renderer = new THREE.WebGPURenderer(props as any); - await renderer.init(); - return renderer; - }} - shadows - > - - - - - ); + return ; } diff --git a/apps/editor/package.json b/apps/editor/package.json index 8e43e376..b92d1260 100644 --- a/apps/editor/package.json +++ b/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", diff --git a/bun.lock b/bun.lock index 9fd63989..ff04d206 100644 --- a/bun.lock +++ b/bun.lock @@ -15,6 +15,7 @@ "version": "0.1.0", "dependencies": { "@pascal-app/core": "*", + "@pascal-app/viewer": "*", "@react-three/drei": "^10", "@react-three/fiber": "^9", "@react-three/uikit-lucide": "^1.0.60", @@ -103,14 +104,16 @@ "@react-three/drei": "^10", "@react-three/fiber": "^9", "@repo/typescript-config": "*", - "three": "^0.176", + "@types/react": "^19.2.2", + "@types/three": "^0.182.0", + "three": "^0.182", "typescript": "5.9.2", }, "peerDependencies": { "@pascal-app/core": "*", "@react-three/drei": "^10", "@react-three/fiber": "^9", - "three": "^0.176", + "three": "^0.182", }, }, }, @@ -995,6 +998,8 @@ "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="], + "@pascal-app/viewer/three": ["three@0.182.0", "", {}, "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ=="], + "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="], "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="], diff --git a/packages/viewer/package.json b/packages/viewer/package.json index ff22f175..a8b5b45f 100644 --- a/packages/viewer/package.json +++ b/packages/viewer/package.json @@ -15,13 +15,15 @@ "@pascal-app/core": "*", "@react-three/drei": "^10", "@react-three/fiber": "^9", - "three": "^0.176" + "three": "^0.182" }, "devDependencies": { "@react-three/drei": "^10", "@react-three/fiber": "^9", "@repo/typescript-config": "*", - "three": "^0.176", - "typescript": "5.9.2" + "@types/react": "^19.2.2", + "three": "^0.182", + "typescript": "5.9.2", + "@types/three": "^0.182.0" } } diff --git a/apps/editor/components/renderers/scene-renderer.tsx b/packages/viewer/src/components/renderers/scene-renderer.tsx similarity index 100% rename from apps/editor/components/renderers/scene-renderer.tsx rename to packages/viewer/src/components/renderers/scene-renderer.tsx diff --git a/packages/viewer/src/components/viewer/viewer.tsx b/packages/viewer/src/components/viewer/viewer.tsx new file mode 100644 index 00000000..9a850768 --- /dev/null +++ b/packages/viewer/src/components/viewer/viewer.tsx @@ -0,0 +1,36 @@ +"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 {} +} + +extend(THREE as any); + +interface ViewerProps {} + +const Viewer: React.FC = () => { + return ( + { + const renderer = new THREE.WebGPURenderer(props as any); + await renderer.init(); + return renderer; + }} + shadows + > + + + + + ); +}; + +export default Viewer; diff --git a/packages/viewer/src/index.ts b/packages/viewer/src/index.ts index 336ce12b..d7c73a1c 100644 --- a/packages/viewer/src/index.ts +++ b/packages/viewer/src/index.ts @@ -1 +1 @@ -export {} +export { default as Viewer } from "./components/viewer/viewer"