CELE-20 feat: Keep meshes consistent

MetaCell · Apr 26, 2024 · 395337f · 395337f
1 parent ed03a05
commit 395337f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/applications/visualizer/frontend/settings/threeDSettings.ts b/applications/visualizer/frontend/settings/threeDSettings.ts
@@ -3,8 +3,7 @@ export const CAMERA_POSITION = [0, 0, 50]
 export const CAMERA_NEAR = 0.1
 export const CAMERA_FAR = 2000
 
-export const LIGHT_1_COLOR = 0xeb4634
-export const LIGHT_1_POSITION = [5, 5, 5]
+export const LIGHT_1_COLOR = 0x404040
 export const LIGHT_2_COLOR = 0xccccff
 export const LIGHT_2_POSITION = [-1, 0.75, -0.5]
 

diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/STLMesh.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/STLMesh.tsx
@@ -3,15 +3,17 @@ import {useGlobalContext} from "../../../contexts/GlobalContext.tsx";
 import {useSelector} from "react-redux";
 import {Workspace} from "../../../models/workspace.ts";
 import {RootState} from "../../../layout-manager/layoutManagerFactory.ts";
+import {DoubleSide, NormalBlending} from "three";
 
 interface Props {
     stl: any;
     id: string;
     color: string;
     opacity: number;
+    renderOrder: number;
 }
 
-const STLMesh: FC<Props> = ({id, color, opacity, stl}) => {
+const STLMesh: FC<Props> = ({id, color, opacity, renderOrder, stl}) => {
     const {workspaces} = useGlobalContext();
     const workspaceId = useSelector((state:RootState) => state.workspaceId);
     const workspace: Workspace = workspaces[workspaceId];
@@ -24,9 +26,15 @@ const STLMesh: FC<Props> = ({id, color, opacity, stl}) => {
     // TODO: Add outlines for selected
     // TODO: Test wireframe
     return (
-        <mesh userData={{id}} onClick={onClick}>
+        <mesh userData={{id}} onClick={onClick} frustumCulled={false} renderOrder={renderOrder}>
             <primitive attach="geometry" object={stl}/>
-            <meshStandardMaterial color={color} opacity={opacity} transparent/>
+            <meshStandardMaterial color={color}
+                                  opacity={opacity}
+                                  side={DoubleSide}
+                                  depthWrite={false}
+                                  depthTest={false}
+                                  blending={NormalBlending}
+                                  transparent/>
         </mesh>
     );
 };

diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/STLViewer.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/STLViewer.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from "react";
 import {Center, Select} from "@react-three/drei";
-import {useLoader} from "@react-three/fiber";
+import {useLoader, useThree} from "@react-three/fiber";
 import {STLLoader} from "three/examples/jsm/loaders/STLLoader";
 import {BufferGeometry} from 'three';
 import {Instance} from "./ThreeDViewer.tsx";
@@ -14,17 +14,20 @@ const STLViewer: FC<Props> = ({instances}) => {
     // Todo: Fix typescript warning
     // Check if useLoader caches or do we need to do it ourselves
     const stlObjects = useLoader<STLLoader, BufferGeometry[]>(STLLoader, instances.map(i => i.url));
+    const {scene} = useThree();
+    window.myScene = scene;
 
     return (
         <Center>
-            <group>
+            <group frustumCulled={false}>
                 {stlObjects.map((stl, idx) => (
                     <STLMesh
                         key={idx}
                         stl={stl}
                         id={instances[idx].id}
                         opacity={instances[idx].opacity}
                         color={instances[idx].color}
+                        renderOrder={idx}
                     />
                 ))}
             </group>

diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/ThreeDViewer.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/ThreeDViewer.tsx
@@ -25,8 +25,9 @@ function ThreeDViewer() {
     const [showSynapses, setShowSynapses] = useState<boolean>(true);
     const [instances, setInstances] = useState<Instance[]>([])
 
+
+
     useEffect(() => {
-        // TODO: Understand why adal disappears
         if (showNeurons) {
             setInstances([
                 {
@@ -57,7 +58,7 @@ function ThreeDViewer() {
                     far={CAMERA_FAR}
                 />
                 <CameraControls makeDefault/>
-                <directionalLight color={LIGHT_1_COLOR} position={LIGHT_1_POSITION}/>
+                <ambientLight color={LIGHT_1_COLOR}/>
                 <directionalLight color={LIGHT_2_COLOR} position={LIGHT_2_POSITION}/>
                 <STLViewer instances={instances}/>
                 <GizmoHelper