@wandelbots/wandelbots-js-react-components 1.17.2 → 1.17.4

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>
 }

package/src/components/robots/SupportedRobot.tsx

@@ -1,50 +1,47 @@
 import { Suspense, useCallback, useEffect, useRef } from "react"
 
+import { ABB_1200_07_7 } from "./ABB_1200_07_7"
+import { FANUC_ARC_Mate_100iD } from "./FANUC_ARC_Mate_100iD"
+import { FANUC_ARC_Mate_120iD } from "./FANUC_ARC_Mate_120iD"
+import { FANUC_CRX10iA } from "./FANUC_CRX10iA"
+import { FANUC_CRX20iAL } from "./FANUC_CRX20iAL"
+import { FANUC_CRX25iA } from "./FANUC_CRX25iA"
+import { FANUC_CRX25iAL } from "./FANUC_CRX25iAL"
+import { KUKA_KR16_R2010_2 } from "./KUKA_KR16_R2010_2"
+import { KUKA_KR210_R2700 } from "./KUKA_KR210_R2700"
+import { KUKA_KR270_R2700 } from "./KUKA_KR270_R2700"
+import { UniversalRobots_UR10 } from "./UniversalRobots_UR10"
+import { UniversalRobots_UR10e } from "./UniversalRobots_UR10e"
 import { UniversalRobots_UR3 } from "./UniversalRobots_UR3"
 import { UniversalRobots_UR3e } from "./UniversalRobots_UR3e"
 import { UniversalRobots_UR5 } from "./UniversalRobots_UR5"
 import { UniversalRobots_UR5e } from "./UniversalRobots_UR5e"
-import { UniversalRobots_UR10 } from "./UniversalRobots_UR10"
-import { UniversalRobots_UR10e } from "./UniversalRobots_UR10e"
-import { Yaskawa_AR900 } from "./Yaskawa_AR900"
 import { Yaskawa_AR1440 } from "./Yaskawa_AR1440"
 import { Yaskawa_AR1730 } from "./Yaskawa_AR1730"
 import { Yaskawa_AR2010 } from "./Yaskawa_AR2010"
 import { Yaskawa_AR3120 } from "./Yaskawa_AR3120"
+import { Yaskawa_AR900 } from "./Yaskawa_AR900"
 import { Yaskawa_GP50 } from "./Yaskawa_GP50"
-import { FANUC_CRX10iA } from "./FANUC_CRX10iA"
-import { FANUC_CRX20iAL } from "./FANUC_CRX20iAL"
-import { FANUC_CRX25iA } from "./FANUC_CRX25iA"
-import { FANUC_CRX25iAL } from "./FANUC_CRX25iAL"
-import { KUKA_KR210_R2700 } from "./KUKA_KR210_R2700"
-import { KUKA_KR270_R2700 } from "./KUKA_KR270_R2700"
-import { KUKA_KR16_R2010_2 } from "./KUKA_KR16_R2010_2"
-import { FANUC_ARC_Mate_100iD } from "./FANUC_ARC_Mate_100iD"
-import { FANUC_ARC_Mate_120iD } from "./FANUC_ARC_Mate_120iD"
-import { ABB_1200_07_7 } from "./ABB_1200_07_7"
 
 import type { GroupProps } from "@react-three/fiber"
 import type {
-  MotionGroupStateResponse,
   DHParameter,
+  MotionGroupStateResponse,
 } from "@wandelbots/wandelbots-api-client"
 import { DHRobot } from "./DHRobot"
 
-import * as THREE from "three"
 import { ErrorBoundary } from "react-error-boundary"
-import ConsoleFilter from "../ConsoleFilter"
+import * as THREE from "three"
 import { externalizeComponent } from "../../externalizeComponent"
+import ConsoleFilter from "../ConsoleFilter"
+import RobotAnimator from "./RobotAnimator"
+import type { RobotModelComponent } from "./types"
 
 export type DHRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
   dhParameters: Array<DHParameter>
 } & GroupProps
 
-export type RobotProps = {
-  rapidlyChangingMotionState: MotionGroupStateResponse
-  modelURL: string
-} & GroupProps
-
 export type SupportedRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
   modelFromController: string
@@ -66,107 +63,93 @@ export const SupportedRobot = externalizeComponent(
     isGhost = false,
     ...props
   }: SupportedRobotProps) => {
-    let Robot
+    let Robot: RobotModelComponent | null = null
 
-    const robotRef = useRef<THREE.Group>(new THREE.Group())
+    const robotRef = useRef<THREE.Group>()
 
     const setRobotRef = useCallback(
       (instance: THREE.Group | null) => {
-        if (instance !== null) {
-          robotRef.current = instance
-          console.log("robotRef.current", robotRef.current)
-          if (
-            isGhost &&
-            robotRef.current &&
-            robotRef.current.children.length > 0
-          ) {
-            addGhosts()
-          }
-        }
+        if (!instance) return
+        robotRef.current = instance
+
+        if (isGhost) applyGhostStyle()
       },
       [isGhost],
     )
 
-    const addGhosts = () => {
-      if (robotRef.current && !robotRef.current.userData.ghostsCreated) {
-        robotRef.current.traverse((obj) => {
-          if (obj instanceof THREE.Mesh && !obj.userData.isGhost) {
-            if (obj.material instanceof THREE.Material) {
-              obj.material.colorWrite = false
-            }
+    const applyGhostStyle = () => {
+      if (!robotRef.current || robotRef.current.userData.isGhost) return
 
-            // Create a clone of the mesh
-            const depth = obj.clone()
-            const ghost = obj.clone()
+      robotRef.current.traverse((obj) => {
+        if (obj instanceof THREE.Mesh) {
+          if (obj.material instanceof THREE.Material) {
+            obj.material.colorWrite = true
+          }
+
+          // Create a clone of the mesh
+          const depth = obj.clone()
+          const ghost = obj.clone()
 
-            depth.material = new THREE.MeshStandardMaterial({
-              depthTest: true,
-              depthWrite: true,
-              colorWrite: false,
-              polygonOffset: true,
-              polygonOffsetFactor: 1,
-            })
-            depth.userData.isGhost = true
+          depth.material = new THREE.MeshStandardMaterial({
+            depthTest: true,
+            depthWrite: true,
+            colorWrite: false,
+            polygonOffset: true,
+            polygonOffsetFactor: 1,
+          })
+          depth.userData.isGhost = true
 
-            // Set the material for the ghost mesh
-            ghost.material = new THREE.MeshStandardMaterial({
-              color: "#D91433",
-              opacity: 0.3,
-              depthTest: true,
-              depthWrite: false,
-              transparent: true,
-              polygonOffset: true,
-              polygonOffsetFactor: -1,
-            })
-            ghost.userData.isGhost = true
+          // Set the material for the ghost mesh
+          ghost.material = new THREE.MeshStandardMaterial({
+            color: "#D91433",
+            opacity: 0.3,
+            depthTest: true,
+            depthWrite: false,
+            transparent: true,
+            polygonOffset: true,
+            polygonOffsetFactor: -1,
+          })
+          ghost.userData.isGhost = true
 
-            if (obj.parent) {
-              obj.parent.add(depth)
-              obj.parent.add(ghost)
-            }
+          if (obj.parent) {
+            obj.parent.add(depth)
+            obj.parent.add(ghost)
           }
-        })
-        robotRef.current.userData.ghostsCreated = true
-      }
+        }
+      })
+
+      robotRef.current.userData.isGhost = true
     }
 
-    const removeGhosts = () => {
-      if (robotRef.current) {
-        const objectsToRemove: THREE.Object3D[] = []
+    const removeGhostStyle = () => {
+      if (!robotRef.current || !robotRef.current.userData.isGhost) return
 
-        robotRef.current.traverse((obj) => {
-          if (obj instanceof THREE.Mesh) {
-            if (obj.material instanceof THREE.Material) {
-              obj.material.colorWrite = true
-            }
-          }
+      const objectsToRemove: THREE.Object3D[] = []
 
-          if (
-            obj instanceof THREE.Mesh &&
-            obj.userData !== undefined &&
-            obj.userData &&
-            obj.userData.isGhost !== undefined &&
-            obj.userData.isGhost
-          ) {
+      robotRef.current.traverse((obj) => {
+        if (obj instanceof THREE.Mesh) {
+          if (obj.userData?.isGhost) {
             objectsToRemove.push(obj)
+          } else if (obj.material instanceof THREE.Material) {
+            obj.material.colorWrite = true
           }
-        })
+        }
+      })
 
-        objectsToRemove.forEach((obj) => {
-          if (obj.parent) {
-            obj.parent.remove(obj)
-          }
-        })
+      objectsToRemove.forEach((obj) => {
+        if (obj.parent) {
+          obj.parent.remove(obj)
+        }
+      })
 
-        robotRef.current.userData.ghostsCreated = false
-      }
+      robotRef.current.userData.isGhost = true
     }
 
     useEffect(() => {
       if (isGhost) {
-        addGhosts()
+        applyGhostStyle()
       } else {
-        removeGhosts()
+        removeGhostStyle()
       }
     }, [isGhost])
 
@@ -245,7 +228,7 @@ export const SupportedRobot = externalizeComponent(
         break
       default:
         console.warn(`Unknown robot type: ${modelFromController}`)
-        Robot = DHRobot
+        Robot = null
     }
 
     return (
@@ -268,12 +251,19 @@ export const SupportedRobot = externalizeComponent(
           }
         >
           <group ref={setRobotRef}>
-            <Robot
-              rapidlyChangingMotionState={rapidlyChangingMotionState}
-              modelURL={getModel(modelFromController)}
-              dhParameters={dhParameters}
-              {...props}
-            />
+            {Robot ? (
+              <RobotAnimator
+                rapidlyChangingMotionState={rapidlyChangingMotionState}
+                robotConfig={Robot.config}
+              >
+                <Robot modelURL={getModel(modelFromController)} {...props} />
+              </RobotAnimator>
+            ) : (
+              <DHRobot
+                rapidlyChangingMotionState={rapidlyChangingMotionState}
+                dhParameters={dhParameters}
+              />
+            )}
           </group>
         </Suspense>
         <ConsoleFilter />

package/src/components/robots/UniversalRobots_UR10.tsx

@@ -1,31 +1,14 @@
-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 UniversalRobots_UR10({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR10({ modelURL, ...props }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
 
-  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
-    jointObjects.forEach(
-      (object, index) => (object.rotation.y = jointValues[index]!),
-    )
-  }
-
   return (
     <>
-      <RobotAnimator
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        robotRootObjectName="Scene"
-        onRotationChanged={setRotation}
-      />
       <group {...props} dispose={null}>
         <group name="Scene">
           <animated.group name="UNIVERSALROBOTS_UR10CB3_J00">