@wandelbots/wandelbots-js-react-components 1.3.1 → 1.4.0

package/src/components/robots/ABB_1200_07_7.tsx

@@ -0,0 +1,127 @@
+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"
+
+export function ABB_1200_07_7({
+  modelURL,
+  rapidlyChangingMotionState,
+  ...props
+}: RobotProps) {
+  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="IRB1200_7_70_IRC5" rotation={[Math.PI / 2, 0, 0]}>
+            <animated.group
+              name="IRB1200_7_70_IRC5_J01"
+              rotation={[-Math.PI / 2, 0, 0]}
+            >
+              <animated.group
+                name="IRB1200_7_70_IRC5_J02"
+                position={[0, 0.399, 0]}
+                rotation={[-Math.PI / 2, -Math.PI / 2, 0]}
+              >
+                <animated.group
+                  name="IRB1200_7_70_IRC5_J03"
+                  position={[0.35, 0, 0]}
+                >
+                  <animated.group
+                    name="IRB1200_7_70_IRC5_J04"
+                    position={[0.042, 0, 0]}
+                    rotation={[-Math.PI / 2, 0, 0]}
+                  >
+                    <animated.group
+                      name="IRB1200_7_70_IRC5_J05"
+                      position={[0, 0.351, 0]}
+                      rotation={[Math.PI / 2, 0, 0]}
+                    >
+                      <animated.group
+                        name="IRB1200_7_70_IRC5_J06"
+                        rotation={[Math.PI / 2, 0, -Math.PI]}
+                      >
+                        <group
+                          name="IRB1200_7_70_IRC5_FLG"
+                          position={[0, 0.082, 0]}
+                        />
+                        <mesh
+                          name="IRB1200_7_70_IRC5_L06"
+                          castShadow
+                          receiveShadow
+                          geometry={nodes.IRB1200_7_70_IRC5_L06.geometry}
+                          material={materials["IRB1200_7-70_IRC5.003_Bake"]}
+                        />
+                      </animated.group>
+                      <mesh
+                        name="IRB1200_7_70_IRC5_L05"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.IRB1200_7_70_IRC5_L05.geometry}
+                        material={materials["IRB1200_7-70_IRC5.003_Bake"]}
+                      />
+                    </animated.group>
+                    <mesh
+                      name="IRB1200_7_70_IRC5_L04"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.IRB1200_7_70_IRC5_L04.geometry}
+                      material={materials["IRB1200_7-70_IRC5.003_Bake"]}
+                    />
+                  </animated.group>
+                  <mesh
+                    name="IRB1200_7_70_IRC5_L03"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.IRB1200_7_70_IRC5_L03.geometry}
+                    material={materials["IRB1200_7-70_IRC5.003_Bake"]}
+                  />
+                </animated.group>
+                <mesh
+                  name="IRB1200_7_70_IRC5_L02"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.IRB1200_7_70_IRC5_L02.geometry}
+                  material={materials["IRB1200_7-70_IRC5.003_Bake"]}
+                />
+              </animated.group>
+              <mesh
+                name="IRB1200_7_70_IRC5_L01"
+                castShadow
+                receiveShadow
+                geometry={nodes.IRB1200_7_70_IRC5_L01.geometry}
+                material={materials["IRB1200_7-70_IRC5.003_Bake"]}
+                rotation={[Math.PI / 2, 0, 0]}
+              />
+            </animated.group>
+            <mesh
+              name="IRB1200_7_70_IRC5_L00"
+              castShadow
+              receiveShadow
+              geometry={nodes.IRB1200_7_70_IRC5_L00.geometry}
+              material={materials["IRB1200_7-70_IRC5.003_Bake"]}
+              rotation={[-Math.PI / 2, 0, 0]}
+            />
+          </group>
+        </group>
+      </group>
+    </>
+  )
+}

package/src/components/robots/AxisConfig.ts

@@ -0,0 +1,3 @@
+export type AxisConfig = number[]
+
+export const defaultAxisConfig: AxisConfig = Array(6).fill(2 * Math.PI)

package/src/components/robots/DHRobot.tsx

@@ -0,0 +1,128 @@
+import { Vector3, Matrix4, Quaternion } from "three"
+import { Line } from "@react-three/drei"
+import type { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js"
+import type { DHParameter } from "@wandelbots/wandelbots-api-client"
+import RobotAnimator from "./RobotAnimator"
+import type * as THREE from "three"
+import {
+  getAllJointsByName,
+  type RobotSceneJoint,
+} from "../utils/robotTreeQuery"
+import type { DHRobotProps } from "./SupportedRobot"
+
+const CHILD_LINE = "line"
+const CHILD_MESH = "mesh"
+
+export function DHRobot({
+  rapidlyChangingMotionState,
+  dhParameters,
+  ...props
+}: DHRobotProps) {
+  // reused in every update
+  const accumulatedMatrix = new Matrix4()
+
+  // Updates accumulatedMatrix with every execution
+  // Reset the matrix to identity if you start a new position update
+  function getLinePoints(
+    dhParameter: DHParameter,
+    jointRotation: number,
+  ): {
+    a: THREE.Vector3
+    b: THREE.Vector3
+  } {
+    const position = new Vector3()
+    const quaternion = new Quaternion()
+    const scale = new Vector3()
+    accumulatedMatrix.decompose(position, quaternion, scale)
+    const prevPosition = position.clone() // Update the previous position
+
+    const matrix = new Matrix4()
+      .makeRotationY(
+        dhParameter.theta! +
+          jointRotation * (dhParameter.reverse_rotation_direction ? -1 : 1),
+      ) // Rotate around Z
+      .multiply(new Matrix4().makeTranslation(0, dhParameter.d! / 1000, 0)) // Translate along Z
+      .multiply(new Matrix4().makeTranslation(dhParameter.a! / 1000, 0, 0)) // Translate along X
+      .multiply(new Matrix4().makeRotationX(dhParameter.alpha!)) // Rotate around X
+
+    // Accumulate transformations
+    accumulatedMatrix.multiply(matrix)
+    accumulatedMatrix.decompose(position, quaternion, scale)
+    return { a: prevPosition, b: position }
+  }
+
+  function setJointLineRotation(
+    jointIndex: number,
+    line: THREE.Line,
+    mesh: THREE.Mesh,
+    jointValue: number,
+  ) {
+    if (!dhParameters) {
+      return
+    }
+
+    const dh_parameter = dhParameters[jointIndex]
+    if (!dh_parameter) {
+      return
+    }
+
+    const { a, b } = getLinePoints(dh_parameter, jointValue)
+    const lineGeometry = line.geometry as LineGeometry
+    lineGeometry.setPositions([a.toArray(), b.toArray()].flat())
+
+    mesh.position.set(b.x, b.y, b.z)
+  }
+
+  function setRotation(joints: THREE.Object3D[], jointValues: number[]) {
+    accumulatedMatrix.identity()
+    joints.forEach((joint, jointIndex) => {
+      setJointLineRotation(
+        jointIndex,
+        joint.getObjectByName(CHILD_LINE) as THREE.Line,
+        joint.getObjectByName(CHILD_MESH) as THREE.Mesh,
+        jointValues[jointIndex]!,
+      )
+    })
+  }
+
+  function getAllJoints(rootObject: THREE.Object3D): RobotSceneJoint[] {
+    return getAllJointsByName(rootObject, "^group_[0-9]+$")
+  }
+
+  return (
+    <>
+      <RobotAnimator
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+        robotRootObjectName="Scene"
+        onRotationChanged={setRotation}
+        jointCollector={getAllJoints}
+      />
+      <group {...props} name="Scene">
+        <mesh>
+          <sphereGeometry args={[0.01, 32, 32]} />
+          <meshStandardMaterial color={"black"} depthTest={true} />
+        </mesh>
+        {dhParameters!.map((param, index) => {
+          const { a, b } = getLinePoints(
+            param,
+            rapidlyChangingMotionState.state.joint_position.joints[index] ?? 0,
+          )
+          return (
+            <group name={`group_${index}`} key={"group_" + index}>
+              <Line
+                name={CHILD_LINE}
+                points={[a, b]}
+                color={"white"}
+                lineWidth={5}
+              />
+              <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
+                <sphereGeometry args={[0.01, 32, 32]} />
+                <meshStandardMaterial color={"black"} depthTest={true} />
+              </mesh>
+            </group>
+          )
+        })}
+      </group>
+    </>
+  )
+}

package/src/components/robots/FANUC_ARC_Mate_100iD.tsx

@@ -0,0 +1,187 @@
+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"
+
+export function FANUC_ARC_Mate_100iD({
+  modelURL,
+  rapidlyChangingMotionState,
+  ...props
+}: RobotProps) {
+  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={[Math.PI / 2, 0, 0]}>
+            <animated.group name="M10iD_J01" rotation={[-Math.PI / 2, 0, 0]}>
+              <animated.group
+                name="M10iD_J02"
+                position={[0.075, 0, 0]}
+                rotation={[Math.PI / 2, Math.PI / 2, 0]}
+              >
+                <animated.group name="M10iD_J03" position={[0.64, 0, 0]}>
+                  <animated.group
+                    name="M10iD_J04"
+                    position={[0.195, 0, 0]}
+                    rotation={[-Math.PI / 2, 0, 0]}
+                  >
+                    <animated.group
+                      name="M10iD_J05"
+                      position={[0, -0.7, 0]}
+                      rotation={[Math.PI / 2, 0, 0]}
+                    >
+                      <animated.group
+                        name="M10iD_J06"
+                        rotation={[-Math.PI / 2, 0, 0]}
+                      >
+                        <group
+                          name="M10iD_FLG"
+                          position={[0, -0.075, 0]}
+                          rotation={[-Math.PI, 0, 0]}
+                        />
+                        <mesh
+                          name="M10iD_L06"
+                          castShadow
+                          receiveShadow
+                          geometry={nodes.M10iD_L06.geometry}
+                          material={materials.Fanuc_BlackMetal_AO}
+                          position={[-0.835, 0.775, 0]}
+                          rotation={[0, 0, -Math.PI / 2]}
+                        />
+                      </animated.group>
+                      <mesh
+                        name="M10iD_L05"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.M10iD_L05.geometry}
+                        material={materials.Fanuc_BlackMetal_AO}
+                        position={[-0.835, 0, -0.775]}
+                        rotation={[-Math.PI / 2, 0, -Math.PI / 2]}
+                      />
+                    </animated.group>
+                    <group
+                      name="M10iD_L04"
+                      position={[-0.835, 0.075, 0]}
+                      rotation={[0, 0, -Math.PI / 2]}
+                    >
+                      <mesh
+                        name="Mesh_654"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Mesh_654.geometry}
+                        material={materials.Fanuc_Yellow_Textured_AO}
+                      />
+                      <mesh
+                        name="Mesh_654_1"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Mesh_654_1.geometry}
+                        material={materials.Fanuc_BlackMetal_AO}
+                      />
+                    </group>
+                  </animated.group>
+                  <group
+                    name="M10iD_L03"
+                    position={[-0.64, 0, -0.075]}
+                    rotation={[-Math.PI / 2, 0, -Math.PI / 2]}
+                  >
+                    <mesh
+                      name="Mesh_378"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.Mesh_378.geometry}
+                      material={materials.Material_1_AO}
+                    />
+                    <mesh
+                      name="Mesh_378_1"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.Mesh_378_1.geometry}
+                      material={materials.Fanuc_Yellow_Textured_AO}
+                    />
+                    <mesh
+                      name="Mesh_378_2"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.Mesh_378_2.geometry}
+                      material={materials.Fanuc_BlackMetal_AO}
+                    />
+                  </group>
+                </animated.group>
+                <group
+                  name="M10iD_L02"
+                  position={[0, 0, -0.075]}
+                  rotation={[-Math.PI / 2, 0, -Math.PI / 2]}
+                >
+                  <mesh
+                    name="Mesh_358"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.Mesh_358.geometry}
+                    material={materials.Fanuc_Yellow_Textured_AO}
+                  />
+                  <mesh
+                    name="Mesh_358_1"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.Mesh_358_1.geometry}
+                    material={materials.Fanuc_BlackMetal_AO}
+                  />
+                </group>
+              </animated.group>
+              <group name="M10iD_L01">
+                <mesh
+                  name="Mesh_356"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.Mesh_356.geometry}
+                  material={materials.Fanuc_Yellow_Textured_AO}
+                />
+                <mesh
+                  name="Mesh_356_1"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.Mesh_356_1.geometry}
+                  material={materials.Material_1_AO}
+                />
+                <mesh
+                  name="Mesh_356_2"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.Mesh_356_2.geometry}
+                  material={materials.Fanuc_BlackMetal_AO}
+                />
+              </group>
+            </animated.group>
+            <mesh
+              name="M10iD_L00"
+              castShadow
+              receiveShadow
+              geometry={nodes.M10iD_L00.geometry}
+              material={materials.Fanuc_BlackMetal_AO}
+              rotation={[-Math.PI / 2, 0, 0]}
+            />
+          </group>
+        </group>
+      </group>
+    </>
+  )
+}

package/src/components/robots/FANUC_ARC_Mate_120iD.tsx

@@ -0,0 +1,187 @@
+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"
+
+export function FANUC_ARC_Mate_120iD({
+  modelURL,
+  rapidlyChangingMotionState,
+  ...props
+}: RobotProps) {
+  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]}>
+            <animated.group name="M20iD25_J00">
+              <animated.group
+                name="M20iD25_J01"
+                position={[0.075, 0, 0]}
+                rotation={[Math.PI / 2, Math.PI / 2, 0]}
+              >
+                <animated.group name="M20iD25_J02" position={[0.84, 0, 0]}>
+                  <animated.group
+                    name="M20iD25_J03"
+                    position={[0.215, 0, 0]}
+                    rotation={[-Math.PI / 2, 0, 0]}
+                  >
+                    <animated.group
+                      name="M20iD25_J04"
+                      position={[0, -0.89, 0]}
+                      rotation={[Math.PI / 2, 0, 0]}
+                    >
+                      <animated.group
+                        name="M20iD25_J05"
+                        rotation={[-Math.PI / 2, 0, 0]}
+                      >
+                        <group
+                          name="M20iD25_FLG"
+                          position={[0, -0.09, 0]}
+                          rotation={[-Math.PI, 0, 0]}
+                        />
+                        <mesh
+                          name="M20iD25_L06"
+                          castShadow
+                          receiveShadow
+                          geometry={nodes.M20iD25_L06.geometry}
+                          material={materials.Fanuc_BlackMetal_AO}
+                          position={[0, -0.09, 0]}
+                          rotation={[Math.PI / 2, 0, Math.PI]}
+                        />
+                      </animated.group>
+                      <mesh
+                        name="M20iD25_L05"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.M20iD25_L05.geometry}
+                        material={materials.Fanuc_BlackMetal_AO}
+                        rotation={[Math.PI, Math.PI / 2, 0]}
+                      />
+                    </animated.group>
+                    <group
+                      name="M20iD25_L04"
+                      position={[0, -0.286, 0]}
+                      rotation={[-Math.PI / 2, Math.PI / 2, 0]}
+                    >
+                      <mesh
+                        name="Mesh_2"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Mesh_2.geometry}
+                        material={materials.Fanuc_Yellow_Textured_AO}
+                      />
+                      <mesh
+                        name="Mesh_2_1"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.Mesh_2_1.geometry}
+                        material={materials.Fanuc_BlackMetal_AO}
+                      />
+                    </group>
+                  </animated.group>
+                  <group
+                    name="M20iD25_L03"
+                    position={[0, 0.406, 0]}
+                    rotation={[Math.PI, Math.PI / 2, 0]}
+                  >
+                    <mesh
+                      name="Mesh_15"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.Mesh_15.geometry}
+                      material={materials.Fanuc_BlackMetal_AO}
+                    />
+                    <mesh
+                      name="Mesh_15_1"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.Mesh_15_1.geometry}
+                      material={materials.Fanuc_Yellow_Textured_AO}
+                    />
+                    <mesh
+                      name="Mesh_15_2"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.Mesh_15_2.geometry}
+                      material={materials.Material_9_AO}
+                    />
+                  </group>
+                </animated.group>
+                <group
+                  name="M20iD25_L02"
+                  position={[0, 0.505, -0.055]}
+                  rotation={[-Math.PI, Math.PI / 2, 0]}
+                >
+                  <mesh
+                    name="Mesh_37"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.Mesh_37.geometry}
+                    material={materials.Fanuc_BlackMetal_AO}
+                  />
+                  <mesh
+                    name="Mesh_37_1"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.Mesh_37_1.geometry}
+                    material={materials.Fanuc_Yellow_Textured_AO}
+                  />
+                </group>
+              </animated.group>
+              <group name="M20iD25_L01" rotation={[-Math.PI / 2, 0, 0]}>
+                <mesh
+                  name="Mesh_45"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.Mesh_45.geometry}
+                  material={materials.Material_9_AO}
+                />
+                <mesh
+                  name="Mesh_45_1"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.Mesh_45_1.geometry}
+                  material={materials.Fanuc_Yellow_Textured_AO}
+                />
+                <mesh
+                  name="Mesh_45_2"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.Mesh_45_2.geometry}
+                  material={materials.Fanuc_BlackMetal_AO}
+                />
+              </group>
+            </animated.group>
+            <mesh
+              name="M20iD25_L00"
+              castShadow
+              receiveShadow
+              geometry={nodes.M20iD25_L00.geometry}
+              material={materials.Fanuc_BlackMetal_AO}
+              position={[0, -0.425, 0]}
+              rotation={[-Math.PI / 2, 0, 0]}
+            />
+          </group>
+        </group>
+      </group>
+    </>
+  )
+}