@wandelbots/wandelbots-js-react-components 2.27.1 → 2.28.0-pr.feature-add-program-control-component.367.28afd72

package/src/components/robots/RobotAnimator.tsx

@@ -1,12 +1,12 @@
-import { Globals, useSpring } from "@react-spring/three"
-import { useThree } from "@react-three/fiber"
+import { useFrame, useThree } from "@react-three/fiber"
 import type {
   DHParameter,
   MotionGroupStateResponse,
 } from "@wandelbots/nova-api/v1"
-import React, { useRef } from "react"
+import React, { useEffect, useRef } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
+import { ValueInterpolator } from "../utils/interpolation"
 import { collectJoints } from "./robotModelLogic"
 
 type RobotAnimatorProps = {
@@ -22,11 +22,42 @@ export default function RobotAnimator({
   onRotationChanged,
   children,
 }: RobotAnimatorProps) {
-  Globals.assign({ frameLoop: "always" })
   const jointValues = useRef<number[]>([])
   const jointObjects = useRef<Object3D[]>([])
+  const interpolatorRef = useRef<ValueInterpolator | null>(null)
   const { invalidate } = useThree()
 
+  // Initialize interpolator
+  useEffect(() => {
+    const initialJointValues =
+      rapidlyChangingMotionState.state.joint_position.joints.filter(
+        (item) => item !== undefined,
+      )
+
+    interpolatorRef.current = new ValueInterpolator(initialJointValues, {
+      tension: 120, // Controls spring stiffness - higher values create faster, more responsive motion
+      friction: 20, // Controls damping - higher values reduce oscillation and create smoother settling
+      threshold: 0.001,
+    })
+
+    return () => {
+      interpolatorRef.current?.destroy()
+    }
+  }, [])
+
+  // Animation loop that runs at the display's refresh rate
+  useFrame((state, delta) => {
+    if (interpolatorRef.current) {
+      const isComplete = interpolatorRef.current.update(delta)
+      setRotation()
+
+      // Trigger a re-render only if the animation is still running
+      if (!isComplete) {
+        invalidate()
+      }
+    }
+  })
+
   function setGroupRef(group: Group | null) {
     if (!group) return
 
@@ -39,13 +70,11 @@ export default function RobotAnimator({
 
   function updateJoints(newJointValues: number[]) {
     jointValues.current = newJointValues
-    setSpring.start(Object.assign({}, jointValues.current) as any)
+    interpolatorRef.current?.setTarget(newJointValues)
   }
 
   function setRotation() {
-    const updatedJointValues = jointObjects.current.map((_, objectIndex) =>
-      (axisValues as any)[objectIndex].get(),
-    )
+    const updatedJointValues = interpolatorRef.current?.getCurrentValues() || []
 
     if (onRotationChanged) {
       onRotationChanged(jointObjects.current, updatedJointValues)
@@ -56,7 +85,7 @@ export default function RobotAnimator({
         const rotationSign = dhParam.reverse_rotation_direction ? -1 : 1
 
         object.rotation.y =
-          rotationSign * updatedJointValues[index]! + rotationOffset
+          rotationSign * (updatedJointValues[index] || 0) + rotationOffset
       }
     }
   }
@@ -70,19 +99,5 @@ export default function RobotAnimator({
     requestAnimationFrame(() => updateJoints(newJointValues))
   })
 
-  const [axisValues, setSpring] = useSpring(() => ({
-    ...Object.assign(
-      {},
-      rapidlyChangingMotionState.state.joint_position.joints,
-    ),
-    onChange: () => {
-      setRotation()
-      invalidate()
-    },
-    onResolve: () => {
-      setRotation()
-    },
-  }))
-
   return <group ref={setGroupRef}>{children}</group>
 }

package/src/components/robots/SupportedRobot.tsx

@@ -1,4 +1,4 @@
-import type { GroupProps } from "@react-three/fiber"
+import type { ThreeElements } from "@react-three/fiber"
 import type {
   DHParameter,
   MotionGroupStateResponse,
@@ -18,7 +18,7 @@ import { defaultGetModel } from "./robotModelLogic"
 export type DHRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
   dhParameters: Array<DHParameter>
-} & GroupProps
+} & ThreeElements["group"]
 
 export type SupportedRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
@@ -28,7 +28,7 @@ export type SupportedRobotProps = {
   getModel?: (modelFromController: string) => string
   postModelRender?: () => void
   transparentColor?: string
-} & GroupProps
+} & ThreeElements["group"]
 
 export const SupportedRobot = externalizeComponent(
   ({

package/src/components/utils/converters.ts

@@ -20,4 +20,4 @@ export function tryStringifyJson(json: unknown): string | undefined {
   } catch {
     return undefined
   }
-}
+}