feat: highlight on hover

sensebox · Dec 5, 2024 · dac3836 · dac3836
1 parent b65aa75
commit dac3836
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 5 deletions.
diff --git a/src/scenes/bike/model/fanEnclosure.tsx b/src/scenes/bike/model/fanEnclosure.tsx
@@ -1,11 +1,17 @@
+import { Edges, Outlines } from "@react-three/drei";
+import { useState } from "react";
 import ModuleGroupProps from "./types/module";
 
 export function FanEnclosure({ nodes, materials, ...props }: ModuleGroupProps) {
+  const [hovered, hover] = useState(false);
+
   return (
     <group
       name="Fan_Enclosure"
       position={[-33.925, 4.025, 37.7]}
       userData={{ name: "Fan Enclosure" }}
+      onPointerOver={() => hover(true)}
+      onPointerOut={() => hover(false)}
       {...props}
     >
       <mesh
@@ -17,7 +23,9 @@ export function FanEnclosure({ nodes, materials, ...props }: ModuleGroupProps) {
         position={[33.925, -4.025, -37.7]}
         rotation={[Math.PI / 2, 0, 0]}
         userData={{ name: "Filter" }}
-      />
+      >
+        <Outlines thickness={2} color={hovered ? "#ffff00" : "black"} />
+      </mesh>
       <mesh
         name="TPU_Module_-_Lüfter_Ohne_Gitter"
         castShadow
@@ -27,7 +35,12 @@ export function FanEnclosure({ nodes, materials, ...props }: ModuleGroupProps) {
         position={[33.925, -4.025, -37.7]}
         rotation={[Math.PI / 2, 0, 0]}
         userData={{ name: "TPU Module - Lüfter Ohne Gitter" }}
-      />
+      >
+        <Edges
+          lineWidth={hovered ? 4 : 0}
+          color={hovered ? "#ffff00" : "black"}
+        />
+      </mesh>
     </group>
   );
 }
diff --git a/src/scenes/bike/model/lid.tsx b/src/scenes/bike/model/lid.tsx
@@ -1,11 +1,17 @@
+import { Edges } from "@react-three/drei";
+import { useState } from "react";
 import ModuleGroupProps from "./types/module";
 
 export function Lid({ nodes, materials, ...props }: ModuleGroupProps) {
+  const [hovered, hover] = useState(false);
+
   return (
     <group
       name="Lid_with_modules"
       position={[0.25, -16.25, -40.75]}
       userData={{ name: "Lid with modules" }}
+      onPointerOver={() => hover(true)}
+      onPointerOut={() => hover(false)}
       {...props}
     >
       <mesh
@@ -129,7 +135,13 @@ export function Lid({ nodes, materials, ...props }: ModuleGroupProps) {
           position={[-0.25, 16.25, 40.75]}
           rotation={[Math.PI / 2, 0, 0]}
           userData={{ name: "TPU - Deckel mit Display" }}
-        />
+        >
+          <Edges
+            linewidth={hovered ? 4 : 0}
+            threshold={24}
+            color={hovered ? "#0000ff" : "black"}
+          />
+        </mesh>
       </group>
     </group>
   );

diff --git a/src/scenes/bike/model/tof.tsx b/src/scenes/bike/model/tof.tsx
@@ -1,8 +1,18 @@
+import { Edges } from "@react-three/drei";
+import { useState } from "react";
 import ModuleGroupProps from "./types/module";
 
 export function ToF({ nodes, materials, ...props }: ModuleGroupProps) {
+  const [hovered, hover] = useState(false);
+
   return (
-    <group name="ToF_V53L8CX" userData={{ name: "ToF V53L8CX" }} {...props}>
+    <group
+      name="ToF_V53L8CX"
+      userData={{ name: "ToF V53L8CX" }}
+      {...props}
+      onPointerOver={() => hover(true)}
+      onPointerOut={() => hover(false)}
+    >
       <mesh
         name="Buffer_Object_226"
         castShadow
@@ -47,7 +57,13 @@ export function ToF({ nodes, materials, ...props }: ModuleGroupProps) {
         material={materials["Plastic_-_Glossy_(Black)"]}
         rotation={[Math.PI / 2, 0, 0]}
         userData={{ name: "TPU Module - Distanz Sensor ToF V3" }}
-      />
+      >
+        <Edges
+          linewidth={hovered ? 4 : 0}
+          threshold={24}
+          color={hovered ? "#00ffff" : "black"}
+        />
+      </mesh>
     </group>
   );
 }