@wandelbots/wandelbots-js-react-components 1.17.3 → 1.17.5

package/src/components/robots/FANUC_ARC_Mate_120iD.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
 import { animated } from "@react-spring/three"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_ARC_Mate_120iD({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_ARC_Mate_120iD.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_ARC_Mate_120iD({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="M10iD" rotation={[0, 0, 0]}>

package/src/components/robots/FANUC_CRX10iA.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
 import { animated } from "@react-spring/three"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_CRX10iA({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_CRX10iA.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_CRX10iA({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="CRX10iA_J00">

package/src/components/robots/FANUC_CRX20iAL.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_CRX20iAL({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_CRX20iAL.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_CRX20iAL({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <mesh

package/src/components/robots/FANUC_CRX25iA.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_CRX25iA({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_CRX25iA.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_CRX25iA({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene" position={[0, -0.37, 0]}>
           <group name="CRX25iA_L00">

package/src/components/robots/FANUC_CRX25iAL.tsx

@@ -1,33 +1,18 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function FANUC_CRX25iAL({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+FANUC_CRX25iAL.config = {
+  rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function FANUC_CRX25iAL({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
-  const rotationOffsets = [0, Math.PI / 2, 0, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="CRX10iA_J00">

package/src/components/robots/KUKA_KR16_R2010_2.tsx

@@ -1,9 +1,8 @@
+import { animated } from "@react-spring/three"
 import { useGLTF } from "@react-three/drei"
 import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
 import type { GLTF } from "three-stdlib"
+import type { RobotModelProps } from "./types"
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -29,29 +28,15 @@ type GLTFResult = GLTF & {
   }
 }
 
-export function KUKA_KR16_R2010_2({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
-  const { nodes, materials } = useGLTF(modelURL) as GLTFResult
-
-  const rotationOffsets = [0, 0, -Math.PI / 2, 0, 0, 0]
+KUKA_KR16_R2010_2.config = {
+  rotationOffsets: [0, 0, -Math.PI / 2, 0, 0, 0],
+}
 
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
+export function KUKA_KR16_R2010_2({ modelURL, ...props }: RobotModelProps) {
+  const { nodes, materials } = useGLTF(modelURL) as GLTFResult
 
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="link_0">
@@ -77,28 +62,28 @@ export function KUKA_KR16_R2010_2({
               material={materials.material_Material_Metall}
             />
           </group>
-          <group name="KUKA_KR16R2010_2_J00">
-            <group
+          <animated.group name="KUKA_KR16R2010_2_J00">
+            <animated.group
               name="KUKA_KR16R2010_2_J01"
               position={[0.16, 0.52, 0]}
               rotation={[-Math.PI / 2, 0, 0]}
             >
-              <group
+              <animated.group
                 name="KUKA_KR16R2010_2_J02"
                 position={[0.98, 0, 0]}
                 rotation={[0, -Math.PI / 2, 0]}
               >
-                <group
+                <animated.group
                   name="KUKA_KR16R2010_2_J03"
                   position={[0.15, 0, 0]}
                   rotation={[Math.PI / 2, 0, 0]}
                 >
-                  <group
+                  <animated.group
                     name="KUKA_KR16R2010_2_J04"
                     position={[0, -0.86, 0]}
                     rotation={[-Math.PI / 2, 0, 0]}
                   >
-                    <group
+                    <animated.group
                       name="KUKA_KR16R2010_2_J05"
                       rotation={[-Math.PI / 2, 0, -Math.PI]}
                     >
@@ -111,7 +96,7 @@ export function KUKA_KR16_R2010_2({
                         position={[0.67, 2, 0]}
                         rotation={[-Math.PI, 0, Math.PI / 2]}
                       />
-                    </group>
+                    </animated.group>
                     <mesh
                       name="link_5"
                       castShadow
@@ -121,7 +106,7 @@ export function KUKA_KR16_R2010_2({
                       position={[-0.67, 0, 2]}
                       rotation={[Math.PI / 2, 0, -Math.PI / 2]}
                     />
-                  </group>
+                  </animated.group>
                   <mesh
                     name="link_4"
                     castShadow
@@ -131,7 +116,7 @@ export function KUKA_KR16_R2010_2({
                     position={[-0.67, 1.14, 0]}
                     rotation={[0, 0, -Math.PI / 2]}
                   />
-                </group>
+                </animated.group>
                 <group
                   name="link_3"
                   position={[-0.52, 0, 1.14]}
@@ -159,7 +144,7 @@ export function KUKA_KR16_R2010_2({
                     material={materials.material_Material_Farbe__2_}
                   />
                 </group>
-              </group>
+              </animated.group>
               <group
                 name="link_2"
                 position={[-0.16, 0, -0.52]}
@@ -180,7 +165,7 @@ export function KUKA_KR16_R2010_2({
                   material={materials.material_Material_Metall}
                 />
               </group>
-            </group>
+            </animated.group>
             <group name="link_1">
               <mesh
                 name="visuals_1"
@@ -204,7 +189,7 @@ export function KUKA_KR16_R2010_2({
                 material={materials.material_Material_Metall}
               />
             </group>
-          </group>
+          </animated.group>
         </group>
       </group>
     </>

package/src/components/robots/KUKA_KR210_R2700.tsx

@@ -1,35 +1,19 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
+
+KUKA_KR210_R2700.config = {
+  rotationOffsets: [0, 0, -Math.PI / 2, 0, 0, 0],
+}
 
-export function KUKA_KR210_R2700({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function KUKA_KR210_R2700({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  const rotationOffsets = [0, 0, -Math.PI / 2, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
-
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <group name="kuka_kr210_2700">

package/src/components/robots/KUKA_KR270_R2700.tsx

@@ -1,35 +1,19 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
+
+KUKA_KR270_R2700.config = {
+  rotationOffsets: [0, 0, -Math.PI / 2, 0, 0, 0],
+}
 
-export function KUKA_KR270_R2700({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function KUKA_KR270_R2700({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  const rotationOffsets = [0, 0, -Math.PI / 2, 0, 0, 0]
-
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) =>
-        (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
-    )
-  }
-
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="joint_01">

package/src/components/robots/Robot.tsx

@@ -3,7 +3,7 @@ import { type GroupProps } from "@react-three/fiber"
 import type { ConnectedMotionGroup } from "@wandelbots/wandelbots-js"
 import { defaultGetModel, SupportedRobot } from "./SupportedRobot"
 
-export type ConnectecMotionGroupRobotProps = {
+export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
   getModel?: (modelFromController: string) => string
   isGhost?: boolean
@@ -13,7 +13,7 @@ export type ConnectecMotionGroupRobotProps = {
  * The Robot component is a wrapper around the SupportedRobot component
  * for usage with @wandelbots/wandelbots-js ConnectedMotionGroup object.
  *
- * @param {ConnectecMotionGroupRobotProps} props - The properties for the Robot component.
+ * @param {RobotProps} props - The properties for the Robot component.
  * @param {ConnectedMotionGroup} props.connectedMotionGroup - The connected motion group containing motion state and parameters.
  * @param {Function} [props.getModel=defaultGetModel] - Optional function to get the model URL. Defaults to defaultGetModel.
  * @param {Object} props - Additional properties passed to the SupportedRobot component.
@@ -25,7 +25,7 @@ export function Robot({
   getModel = defaultGetModel,
   isGhost = false,
   ...props
-}: ConnectecMotionGroupRobotProps) {
+}: RobotProps) {
   if (!connectedMotionGroup.dhParameters) {
     return null
   }

package/src/components/robots/RobotAnimator.tsx

@@ -1,59 +1,69 @@
-import { useEffect, useRef } from "react"
 import { Globals, useSpring } from "@react-spring/three"
 import { useThree } from "@react-three/fiber"
+import type { MotionGroupStateResponse } from "@wandelbots/wandelbots-api-client"
+import React, { useRef } from "react"
 import type * as THREE from "three"
+import { useAutorun } from "../utils/hooks"
 import {
   getAllJointsByName,
   type RobotSceneJoint,
 } from "../utils/robotTreeQuery"
-import type { MotionGroupStateResponse } from "@wandelbots/wandelbots-api-client"
-import { useAutorun } from "../utils/hooks"
+import type { RobotModelConfig } from "./types"
 
 type RobotAnimatorProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
-  robotRootObjectName: string
-  onRotationChanged: (joints: THREE.Object3D[], jointValues: number[]) => void
+  onRotationChanged?: (joints: THREE.Object3D[], jointValues: number[]) => void
   jointCollector?: (rootObject: THREE.Object3D) => RobotSceneJoint[]
+  robotConfig?: RobotModelConfig
+  children: React.ReactNode
 }
 
 export default function RobotAnimator({
   rapidlyChangingMotionState,
-  robotRootObjectName,
-  onRotationChanged,
   jointCollector,
+  onRotationChanged,
+  robotConfig,
+  children,
 }: RobotAnimatorProps) {
   Globals.assign({ frameLoop: "always" })
   const jointValues = useRef<number[]>([])
   const jointObjects = useRef<THREE.Object3D[]>([])
-  const { scene, invalidate } = useThree()
+  const { invalidate } = useThree()
 
-  useEffect(() => {
-    // All robots have a "Scene" object as root
-    // From this object the tree is traversed and all joints are extracted (ordered ASC)
-    const sceneObject = scene.getObjectByName(robotRootObjectName)
-    if (!sceneObject) {
-      return
-    }
+  function setGroupRef(group: THREE.Group | null) {
+    if (!group) return
 
     jointObjects.current = jointCollector
-      ? jointCollector(sceneObject)
-      : getAllJointsByName(sceneObject)
+      ? jointCollector(group)
+      : getAllJointsByName(group)
 
     // Set initial position
     setRotation()
     invalidate()
-  }, [])
+  }
 
   function updateJoints(newJointValues: number[]) {
     jointValues.current = newJointValues
     setSpring.start(Object.assign({}, jointValues.current) as any)
   }
 
+  const rotationSign = robotConfig?.rotationSign || [1, 1, 1, 1, 1, 1]
+  const rotationOffsets = robotConfig?.rotationOffsets || [0, 0, 0, 0, 0, 0]
+
   function setRotation() {
-    const updatedJointValues = jointObjects.current.map((object, objectIndex) =>
+    const updatedJointValues = jointObjects.current.map((_, objectIndex) =>
       (axisValues as any)[objectIndex].get(),
     )
-    onRotationChanged(jointObjects.current, updatedJointValues)
+
+    if (onRotationChanged) {
+      onRotationChanged(jointObjects.current, updatedJointValues)
+    } else {
+      for (const [index, object] of jointObjects.current.entries()) {
+        object.rotation.y =
+          rotationSign[index]! * updatedJointValues[index]! +
+          rotationOffsets[index]!
+      }
+    }
   }
 
   useAutorun(() => {
@@ -78,5 +88,6 @@ export default function RobotAnimator({
       setRotation()
     },
   }))
-  return null
+
+  return <group ref={setGroupRef}>{children}</group>
 }