kovakmedya
9e78d506ae
Clinics upload intraoral scans as raw STL/PLY/OBJ and labs need to see
what was captured before accepting the case. Built a tooth-level 3D
preview that runs entirely in the browser — no server-side rendering,
no extra service, just three.js + react-three-fiber driven off the
existing download proxy.
Component (src/components/stl-viewer.tsx)
- Detects format from the filename (.stl / .ply / .obj).
- fetch() → ArrayBuffer → STLLoader / PLYLoader / OBJLoader.parse.
- OBJ comes back as a Group; merge the child meshes into a single
BufferGeometry (positions concat) so all three formats render
through the same mesh path.
- Scene: dark background, ambient + two directional lights, a
light-grey standard material, drei <Bounds> for auto-fit framing,
OrbitControls with damping. A 'Sığdır' button in the corner re-fits
the camera by remounting Bounds.
- Cleanup: geometry.dispose() on unmount, fetch cancellation guard,
inline error/loading states.
Wiring (job-files-panel.tsx)
- VIEWABLE_RE = /\.(stl|ply|obj)$/i. Only those rows get the new
eye-icon button.
- STLViewer is loaded via next/dynamic with ssr:false so three.js
(~500KB minified) only enters the bundle when the dialog actually
opens. Mounting is also gated on viewerOpen, so closing the dialog
frees the WebGL context.
- Dialog is a tall (85vh) wide (max-w-5xl) shell with the filename
+ size in the header and the canvas filling the rest.
Deps added: three, @react-three/fiber, @react-three/drei (+ types).
89 lines
2.6 KiB
JSON
89 lines
2.6 KiB
JSON
{
|
|
"name": "lab",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"packageManager": "pnpm@9.15.9",
|
|
"scripts": {
|
|
"dev": "next dev",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "next lint",
|
|
"typecheck": "tsc --noEmit"
|
|
},
|
|
"dependencies": {
|
|
"@dnd-kit/core": "^6.3.1",
|
|
"@dnd-kit/modifiers": "^9.0.0",
|
|
"@dnd-kit/sortable": "^10.0.0",
|
|
"@dnd-kit/utilities": "^3.2.2",
|
|
"@hookform/resolvers": "^5.2.2",
|
|
"@radix-ui/react-accordion": "^1.2.12",
|
|
"@radix-ui/react-avatar": "^1.1.11",
|
|
"@radix-ui/react-checkbox": "^1.3.3",
|
|
"@radix-ui/react-collapsible": "^1.1.12",
|
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
"@radix-ui/react-hover-card": "^1.1.15",
|
|
"@radix-ui/react-label": "^2.1.8",
|
|
"@radix-ui/react-navigation-menu": "^1.2.14",
|
|
"@radix-ui/react-popover": "^1.1.15",
|
|
"@radix-ui/react-progress": "^1.1.8",
|
|
"@radix-ui/react-radio-group": "^1.3.8",
|
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
|
"@radix-ui/react-select": "^2.2.6",
|
|
"@radix-ui/react-separator": "^1.1.8",
|
|
"@radix-ui/react-slot": "^1.2.4",
|
|
"@radix-ui/react-switch": "^1.2.6",
|
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
"@radix-ui/react-toggle": "^1.1.10",
|
|
"@radix-ui/react-toggle-group": "^1.1.11",
|
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
"@react-three/drei": "^10.7.7",
|
|
"@react-three/fiber": "^9.6.1",
|
|
"@tailwindcss/postcss": "^4.1.18",
|
|
"@tanstack/react-table": "^8.21.3",
|
|
"appwrite": "^24.2.0",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"cmdk": "^1.1.1",
|
|
"date-fns": "^4.1.0",
|
|
"lucide-react": "^0.562.0",
|
|
"next": "16.1.1",
|
|
"next-themes": "^0.4.6",
|
|
"node-appwrite": "^23.1.0",
|
|
"postcss": "^8.5.6",
|
|
"react": "19.2.3",
|
|
"react-day-picker": "^9.13.0",
|
|
"react-dom": "19.2.3",
|
|
"react-hook-form": "^7.69.0",
|
|
"react-resizable-panels": "^3.0.4",
|
|
"recharts": "3.6.0",
|
|
"sonner": "^2.0.7",
|
|
"tailwind-merge": "^3.4.0",
|
|
"three": "^0.184.0",
|
|
"vaul": "^1.1.2",
|
|
"zod": "^4.3.2",
|
|
"zustand": "^5.0.9"
|
|
},
|
|
"pnpm": {
|
|
"onlyBuiltDependencies": [
|
|
"sharp",
|
|
"unrs-resolver"
|
|
],
|
|
"patchedDependencies": {
|
|
"node-fetch-native-with-agent@1.7.2": "patches/node-fetch-native-with-agent@1.7.2.patch"
|
|
}
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/eslintrc": "^3.3.3",
|
|
"@types/node": "^25.0.3",
|
|
"@types/react": "^19.2.7",
|
|
"@types/react-dom": "^19.2.3",
|
|
"@types/three": "^0.184.1",
|
|
"eslint": "^9.39.2",
|
|
"eslint-config-next": "16.1.1",
|
|
"tailwindcss": "^4.1.18",
|
|
"tw-animate-css": "^1.4.0",
|
|
"typescript": "^5.9.3"
|
|
}
|
|
}
|