bug fix human

app/src/modules/simulation/human/instances/instance/humanUi.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
-import { Line, useGLTF } from '@react-three/drei';
+import { Tube, useGLTF } from '@react-three/drei';
 import { useFrame, useThree } from '@react-three/fiber';
 import { useIsDragging, useIsRotating, useSelectedAction, useSelectedEventSphere } from '../../../../../store/simulation/useSimulationStore';
 import { useProductContext } from '../../../products/productContext';
@@ -395,13 +395,12 @@ const MarkerPrimitive = ({
     setIsRotating: (val: any) => void;
     handlePointerDown: any;
 }) => {
-    const { controls, scene } = useThree();
+    const { controls, scene, camera } = useThree();
     const [hitPoint, setHitPoint] = useState<THREE.Vector3 | null>(null);
-
-    const lineRef = useRef<THREE.BufferGeometry>(null);
+    const [curve, setCurve] = useState<THREE.CatmullRomCurve3 | null>(null);
 
     useFrame(() => {
-        if (!refProp.current || !outerGroupRef.current) return;
+        if (!refProp.current || !outerGroupRef.current || !scene) return;
 
         const worldPos = new THREE.Vector3();
         refProp.current.getWorldPosition(worldPos);
@@ -410,6 +409,7 @@ const MarkerPrimitive = ({
         const rayOrigin = worldPos.clone();
         const direction = new THREE.Vector3(0, -1, 0);
         const raycaster = new THREE.Raycaster(rayOrigin, direction, 0.1, 1000);
+        raycaster.camera = camera;
         const intersects = raycaster.intersectObjects(scene.children, true);
 
         const hit = intersects.find(i => i.object.name !== name);
@@ -418,13 +418,14 @@ const MarkerPrimitive = ({
             const localHit = outerGroupRef.current.worldToLocal(hit.point.clone());
             setHitPoint(localHit);
 
-            if (lineRef.current) {
-                const positions = new Float32Array([localMarkerPos.x, localMarkerPos.y, localMarkerPos.z, localHit.x, localHit.y, localHit.z]);
-                lineRef.current.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-                lineRef.current.attributes.position.needsUpdate = true;
-            }
+            const newCurve = new THREE.CatmullRomCurve3([
+                localMarkerPos.clone(),
+                localHit.clone(),
+            ]);
+            setCurve(newCurve);
         } else {
             setHitPoint(null);
+            setCurve(null);
         }
     });
 
@@ -450,15 +451,16 @@ const MarkerPrimitive = ({
                 <>
                     <mesh name={name} position={hitPoint} rotation={[-Math.PI / 2, 0, 0]}>
                         <torusGeometry args={[0.15, 0.02, 3, 32]} />
-                        <meshBasicMaterial color={color} transparent opacity={0.8} depthWrite={false} />
+                        <meshBasicMaterial color={color} depthWrite={false} />
                     </mesh>
 
-                    <line>
-                        <bufferGeometry ref={lineRef} />
-                        <lineBasicMaterial color={color} />
-                    </line>
+                    {curve && (
+                        <Tube args={[curve, 20, 0.01, 8, true]} >
+                            <meshBasicMaterial color={color} depthWrite={false} />
+                        </Tube>
+                    )}
                 </>
             )}
         </>
     );
-};
+};