Add helper icon box for raycasting

adeira-source-id: a3bf847cf06925d4f75d3b57c9bee945998c0fb9
trytriplex · Jun 18, 2023 · d9ba4b8 · d9ba4b8
1 parent c68ca2d
commit d9ba4b8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/examples/faze/src/scenes/camera-testing.tsx b/examples/faze/src/scenes/camera-testing.tsx
@@ -18,7 +18,7 @@ export function Scene() {
       <PlayerEntity position={[0, 0, 0]} />
 
       <PerspectiveCamera
-        position={[-0.14164693646901694, 1.7321220378277902, 2.068985775667036]}
+        position={[-0.14164693646901694, 1.73212203782779, 2.068985775667036]}
         rotation={[-0.24980476564436316, 0, 0]}
       />
 
@@ -30,12 +30,14 @@ export function Scene() {
         <meshStandardMaterial />
       </mesh>
       <pointLight
-        position={[-1.997110931458752, 5.560439855681761, -0.9603405372967642]}
+        position={[
+          -1.2699541074706056, 1.4174759550931917, -0.9603405372967642,
+        ]}
         castShadow={true}
         color={"#a8cfd7"}
       />
 
-      <ambientLight intensity={0.2} />
+      <ambientLight intensity={0.2} position={[0, 0.17922755199149176, 0]} />
     </>
   );
 }
diff --git a/packages/scene/src/components/helper.tsx b/packages/scene/src/components/helper.tsx
@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ThreeEvent, useFrame } from "@react-three/fiber";
 import { useLayoutEffect, useRef, useState } from "react";
-import { Object3D } from "three";
+import { Mesh, Object3D } from "three";
 import "./camera-helper";
 
 type Helper =
@@ -13,8 +12,7 @@ type Helper =
 
 type HelperInstance = Object3D & { update: () => void; dispose: () => void };
 
-const LIGHT_HELPER_SIZE = 0.2;
-const HELPER_EXCLUSIONS = ["directionalLightHelper", "spotLightHelper"];
+const HELPER_SIZE = 0.2;
 
 export const getHelperForElement = (
   name: string
@@ -25,10 +23,10 @@ export const getHelperForElement = (
     case "rectAreaLight":
     case "pointLight":
     case "ambientLight":
-      return ["pointLightHelper", [LIGHT_HELPER_SIZE]];
+      return ["pointLightHelper", [HELPER_SIZE]];
 
     case "hemisphereLight":
-      return ["hemisphereLightHelper", [LIGHT_HELPER_SIZE]];
+      return ["hemisphereLightHelper", [HELPER_SIZE]];
 
     case "spotLight":
       return ["spotLightHelper", []];
@@ -47,20 +45,40 @@ export const getHelperForElement = (
   }
 };
 
+function HelperIcon({
+  target,
+  onClick,
+}: {
+  target: Object3D;
+  onClick: (e: ThreeEvent<MouseEvent>) => void;
+}) {
+  const ref = useRef<Mesh>(null!);
+
+  useFrame(() => {
+    ref.current.position.copy(target.position);
+  });
+
+  return (
+    <mesh onClick={onClick} ref={ref}>
+      <boxGeometry args={[HELPER_SIZE, HELPER_SIZE, HELPER_SIZE]} />
+      <meshBasicMaterial transparent opacity={0} />
+    </mesh>
+  );
+}
+
 export function Helper({
   args = [],
   parentObject,
   helperName: HelperElement,
   onClick,
 }: {
-  args?: any[];
+  args?: unknown[];
   parentObject: React.MutableRefObject<Object3D | null>;
   helperName: Helper;
   onClick: (e: ThreeEvent<MouseEvent>) => void;
 }) {
-  const [target, setTarget] = useState<any | null>(null);
+  const [target, setTarget] = useState<Object3D | null>(null);
   const helperRef = useRef<HelperInstance>(null);
-  const altHelperRef = useRef<HelperInstance>(null);
 
   useLayoutEffect(() => {
     if (parentObject && parentObject?.current) {
@@ -70,25 +88,15 @@ export function Helper({
 
   useFrame(() => {
     helperRef.current?.update();
-    altHelperRef.current?.update();
   });
 
   if (target) {
-    const isExcluded = HELPER_EXCLUSIONS.includes(HelperElement);
-
     return (
       <>
-        {isExcluded && (
-          <pointLightHelper
-            ref={altHelperRef as any}
-            args={[target, LIGHT_HELPER_SIZE]}
-            onClick={onClick}
-          />
-        )}
-
+        <HelperIcon target={target} onClick={onClick} />
         <HelperElement
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={helperRef as any}
-          onClick={isExcluded ? undefined : onClick}
           // @ts-expect-error - Hacking, sorry!
           args={[target, ...args]}
         />