diff --git a/src/components/Brain/ThreeDBrain/BrainModel/index.tsx b/src/components/Brain/ThreeDBrain/BrainModel/index.tsx
index e234972..0f1d561 100644
--- a/src/components/Brain/ThreeDBrain/BrainModel/index.tsx
+++ b/src/components/Brain/ThreeDBrain/BrainModel/index.tsx
@@ -1,17 +1,18 @@
import { useMemo } from 'react'
-import type {
- Color,
- Object3D,
-} from 'three'
+import type { Object3D } from 'three'
import type { GLTF } from 'three-stdlib'
import type { ObjectMap } from '@react-three/fiber'
import {
+ MeshTransmissionMaterial,
useGLTF,
} from '@react-three/drei'
import { useStyles } from '@/hooks/useStyles'
-import type { Node3D } from './types'
+import type {
+ BrainNode,
+ Node3D,
+} from './types'
const BRAIN_GLB_PATH = '/3D/models/brain_areas.glb'
//const BRAIN_GLB_PATH = '/3D/models/brain_areas-compressed.glb'
@@ -48,7 +49,17 @@ export function BrainModel({ onClickBrain }: { onClickBrain?: () => void }) {
geometry={brainNodes[key].object3d.geometry}
material={material}
>
-
+ {(brainNodes[key].isTransitionMaterial && (
+
+ )) || }
))}
@@ -64,41 +75,44 @@ function useBrainNodes(gltf: GLTF & ObjectMap) {
}), [ getColorVarThree ])
return useMemo(() => {
- const brainRaw: Record = {
+ const brainRaw: Record & { object3d: Object3D }> = {
pituitaryGland: {
- object3d: gltf.nodes.Brain_Part_01_BRAIN_TEXTURE_blinn2_0,
color: colors.medium,
+ object3d: gltf.nodes.Brain_Part_01_BRAIN_TEXTURE_blinn2_0,
},
cerebellum: {
- object3d: gltf.nodes.Brain_Part_02_BRAIN_TEXTURE_blinn2_0,
color: colors.dark,
+ object3d: gltf.nodes.Brain_Part_02_BRAIN_TEXTURE_blinn2_0,
},
corpusCallosum: {
- object3d: gltf.nodes.Brain_Part_03_BRAIN_TEXTURE_blinn2_0,
color: colors.medium,
+ object3d: gltf.nodes.Brain_Part_03_BRAIN_TEXTURE_blinn2_0,
},
leftHemisphere: {
- object3d: gltf.nodes.Brain_Part_04_BRAIN_TEXTURE_blinn2_0,
color: colors.light,
+ isTransitionMaterial: true,
+ object3d: gltf.nodes.Brain_Part_04_BRAIN_TEXTURE_blinn2_0,
},
stem: {
- object3d: gltf.nodes.Brain_Part_05_BRAIN_TEXTURE_blinn2_0,
color: colors.medium,
+ object3d: gltf.nodes.Brain_Part_05_BRAIN_TEXTURE_blinn2_0,
},
rightHemisphere: {
- object3d: gltf.nodes.Brain_Part_06_BRAIN_TEXTURE_blinn2_0,
color: colors.light,
+ isTransitionMaterial: true,
+ object3d: gltf.nodes.Brain_Part_06_BRAIN_TEXTURE_blinn2_0,
},
}
// `.geometry` does not exist on the THREE.Object3D type, but it does exist in the nodes pulled out from the GLB
// Map over the nodes here using the isNode3D type gaurd to apply the proper type while maintaining type safety
- const brain: Record = Object.entries(brainRaw)
- .reduce((acc: Record, [key, value]) => {
+ const brain: Record = Object.entries(brainRaw)
+ .reduce((acc: Record, [key, value]) => {
if (isNode3D(value.object3d)) {
acc[key] = {
- object3d: value.object3d,
color: value.color,
+ isTransitionMaterial: value.isTransitionMaterial,
+ object3d: value.object3d,
}
}
diff --git a/src/components/Brain/ThreeDBrain/BrainModel/types.ts b/src/components/Brain/ThreeDBrain/BrainModel/types.ts
index c1734e3..da3e296 100644
--- a/src/components/Brain/ThreeDBrain/BrainModel/types.ts
+++ b/src/components/Brain/ThreeDBrain/BrainModel/types.ts
@@ -1,8 +1,15 @@
import type {
BufferGeometry,
+ Color,
Object3D,
} from 'three'
+export type BrainNode = {
+ color?: Color,
+ isTransitionMaterial?: boolean,
+ object3d: Node3D,
+}
+
export type Node3D = Object3D & {
geometry: BufferGeometry,
}