morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

viewer rendering canvas & scene

Browse Source
This commit is contained in:
wass08
2026-01-15 08:47:55 +09:00
parent aa8ee9c034
commit 7a4d6e397d
7 changed files with 52 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/components/editor.tsx
+2 -27
View File
@@ -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/package.json
+1
View File
@@ -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",
bun.lock
+7 -2
View File
@@ -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=="],
packages/viewer/package.json
+5 -3
View File
@@ -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"
}
}
apps/editor/components/renderers/scene-renderer.tsx → packages/viewer/src/components/renderers/scene-renderer.tsx
View File
packages/viewer/src/components/viewer/viewer.tsx
+36
View File
@@ -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<typeof THREE> {}
}
extend(THREE as any);
interface ViewerProps {}
const Viewer: React.FC<ViewerProps> = () => {
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>
);
};
export default Viewer;
packages/viewer/src/index.ts
+1 -1
View File
@@ -1 +1 @@
export {}
export { default as Viewer } from "./components/viewer/viewer"