CELE-20 feat: Add base STLViewer

MetaCell · Apr 25, 2024 · 2b3188f · 2b3188f
1 parent ee05ada
commit 2b3188f
Show file tree

Hide file tree

Showing 13 changed files with 575 additions and 17 deletions.
diff --git a/applications/visualizer/frontend/package.json b/applications/visualizer/frontend/package.json
@@ -21,11 +21,15 @@
     "@metacell/geppetto-meta-core": "^1.2.8",
     "@metacell/geppetto-meta-ui": "^1.2.8",
     "@mui/material": "^5.15.15",
+    "@react-three/drei": "^9.105.4",
+    "@react-three/fiber": "^8.16.2",
     "@reduxjs/toolkit": "^2.2.3",
+    "@types/three": "^0.163.0",
     "file-saver": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^9.1.1"
+    "react-redux": "^9.1.1",
+    "three": "^0.163.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

diff --git a/applications/visualizer/frontend/public/bone.stl b/applications/visualizer/frontend/public/bone.stl
diff --git a/applications/visualizer/frontend/settings/threeDSettings.ts b/applications/visualizer/frontend/settings/threeDSettings.ts
@@ -0,0 +1,11 @@
+export const CAMERA_FOV = 60
+export const CAMERA_POSITION = [3, 0.15, 3]
+export const CAMERA_NEAR = 1
+export const CAMERA_FAR = 5000
+
+export const LIGHT_1_COLOR = 0xeb4634
+export const LIGHT_1_POSITION = [1, 0.75, 0.5]
+export const LIGHT_2_COLOR = 0xccccff
+export const LIGHT_2_POSITION = [-1, 0.75, -0.5]
+
+export const SCENE_BACKGROUND = 'grey'
diff --git a/applications/visualizer/frontend/src/App.tsx b/applications/visualizer/frontend/src/App.tsx
@@ -1,14 +1,13 @@
 import {Provider} from "react-redux";
 import {ThemeProvider} from '@mui/material/styles';
-import {Box, Button, CssBaseline} from "@mui/material";
+import {Box, CssBaseline} from "@mui/material";
 import '@metacell/geppetto-meta-ui/flex-layout/style/dark.scss';
 import theme from './theme/index.tsx';
 import './App.css'
 import {useGlobalContext} from "./contexts/GlobalContext.tsx";
 import AppLauncher from "./components/AppLauncher.tsx";
 import Workspace from "./components/Workspace.tsx";
 import React from "react";
-import {createEmptyWorkspace} from "./helpers/initialWorkspacesHelper.ts";
 import {ViewMode} from "./models.ts";
 
 function App() {

diff --git a/applications/visualizer/frontend/src/components/Workspace.tsx b/applications/visualizer/frontend/src/components/Workspace.tsx
@@ -6,7 +6,6 @@ import {addWidget} from '@metacell/geppetto-meta-client/common/layout/actions';
 import '@metacell/geppetto-meta-ui/flex-layout/style/dark.scss';
 import theme from '../theme';
 import {useGlobalContext} from "../contexts/GlobalContext.tsx";
-import threeDViewer from "./viewers/ThreeDViewer.tsx";
 import {threeDViewerWidget} from "../layout-manager/widgets.ts";
 
 

diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/Loader.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/Loader.tsx
@@ -0,0 +1,13 @@
+import { Html, useProgress } from "@react-three/drei";
+
+const Loader = () => {
+  const { progress } = useProgress();
+
+  return (
+    <Html center>
+      <span style={{ color: "white" }}>{Math.floor(progress)} % loaded</span>
+    </Html>
+  );
+};
+
+export default Loader;
diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/STLMesh.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/STLMesh.tsx
@@ -0,0 +1,18 @@
+import React, {FC} from "react";
+
+interface Props {
+    stl: any;
+    color: string;
+    opacity: number;
+}
+
+const STLMesh: FC<Props> = ({color, opacity, stl}) => {
+    return (
+        <mesh castShadow receiveShadow>
+            <primitive attach="geometry" object={stl}/>
+            <meshStandardMaterial color={color} opacity={opacity} transparent/>
+        </mesh>
+    );
+};
+
+export default STLMesh;
diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/STLViewer.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/STLViewer.tsx
@@ -0,0 +1,32 @@
+import React, {FC, Suspense} from "react";
+import {Center, Loader} from "@react-three/drei";
+import {useLoader} from "@react-three/fiber";
+import {STLLoader} from "three/examples/jsm/loaders/STLLoader";
+import {BufferGeometry} from 'three';
+import {Instance} from "./ThreeDViewer.tsx";
+import STLMesh from "./STLMesh.tsx";
+
+interface Props {
+    instances: Instance[];
+}
+
+const STLViewer: FC<Props> = ({instances}) => {
+    const stl = useLoader<STLLoader, BufferGeometry[]>(STLLoader, instances.map(i => i.url));
+
+    return (
+        <Center>
+            <group rotation={[-Math.PI / 2, 0, 0]}>
+                {stl.map((stl, idx) => (
+                    <STLMesh
+                        key={idx}
+                        stl={stl}
+                        opacity={instances[idx].opacity}
+                        color={instances[idx].color}
+                    />
+                ))}
+            </group>
+        </Center>
+    );
+};
+
+export default STLViewer;
diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/ThreeDViewer.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/ThreeDViewer.tsx
@@ -0,0 +1,67 @@
+import {Suspense, useEffect, useState} from "react";
+import {CameraControls, PerspectiveCamera} from "@react-three/drei";
+import {
+    CAMERA_FAR,
+    CAMERA_FOV,
+    CAMERA_NEAR,
+    CAMERA_POSITION, LIGHT_1_COLOR, LIGHT_1_POSITION, LIGHT_2_COLOR, LIGHT_2_POSITION,
+    SCENE_BACKGROUND
+} from "../../../../settings/threeDSettings.ts";
+import {useGlobalContext} from "../../../contexts/GlobalContext.tsx";
+import {useSelector} from "react-redux";
+import STLViewer from "./STLViewer.tsx";
+import {Canvas} from "@react-three/fiber";
+import Loader from "./Loader.tsx";
+
+export interface Instance {
+    id: string;
+    url: string;
+    color: string;
+    opacity: number;
+}
+
+function ThreeDViewer() {
+
+    const [showNeurons, setShowNeurons] = useState<boolean>(true);
+    const [showSynapses, setShowSynapses] = useState<boolean>(true);
+    const [instances, setInstances] = useState<Instance[]>([])
+
+    const {workspaces} = useGlobalContext();
+    const workspaceId = useSelector(state => state.workspaceId);
+    const workspace = workspaces[workspaceId];
+
+    useEffect(() => {
+        // TODO: Implement
+        if (showNeurons) {
+            setInstances([
+                {
+                    id: 'bone',
+                    url: 'bone.stl',
+                    color: 'white',
+                    opacity: 1
+                }
+            ])
+        }
+    }, [showNeurons, showSynapses]);
+
+    return (
+        <Canvas style={{backgroundColor: SCENE_BACKGROUND}} frameloop="demand">
+            <Suspense fallback={<Loader/>}>
+                <PerspectiveCamera
+                    makeDefault
+                    fov={CAMERA_FOV}
+                    aspect={window.innerWidth / window.innerHeight}
+                    position={CAMERA_POSITION}
+                    near={CAMERA_NEAR}
+                    far={CAMERA_FAR}
+                />
+                <CameraControls makeDefault/>
+                <directionalLight color={LIGHT_1_COLOR} position={LIGHT_1_POSITION}/>
+                <directionalLight color={LIGHT_2_COLOR} position={LIGHT_2_POSITION}/>
+                <STLViewer instances={instances}/>
+            </Suspense>
+        </Canvas>
+    );
+}
+
+export default ThreeDViewer;
diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeDViewer.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeDViewer.tsx
diff --git a/applications/visualizer/frontend/src/layout-manager/componentMap.ts b/applications/visualizer/frontend/src/layout-manager/componentMap.ts
@@ -1,7 +1,7 @@
 import {widgetIds} from "./widgets.ts";
 import LeftComponent from "../components/placeholder/LeftComponent.tsx";
 import RightComponent from "../components/placeholder/RightComponent.tsx";
-import ThreeDViewer from "../components/viewers/ThreeDViewer.tsx";
+import ThreeDViewer from "../components/viewers/ThreeD/ThreeDViewer.tsx";
 
 const componentMap = {
     [widgetIds.leftComponent]: LeftComponent,