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

package/src/components/robots/Yaskawa_AR1730.tsx

@@ -0,0 +1,169 @@
+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 Yaskawa_AR1730({
+  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]
+  const rotationSign = [1, -1, 1, 1, 1, 1]
+
+  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
+    jointObjects.forEach(
+      (object, index) =>
+        (object.rotation.y =
+          rotationSign[index]! * jointValues[index]! + rotationOffsets[index]!),
+    )
+  }
+
+  return (
+    <>
+      <RobotAnimator
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+        robotRootObjectName="Scene"
+        onRotationChanged={setRotation}
+      />
+      <group {...props} dispose={null}>
+        <group name="Scene">
+          <animated.group name="AR1730_J00">
+            <animated.group
+              name="AR1730_J01"
+              position={[0.15, 0, 0]}
+              rotation={[-Math.PI / 2, -Math.PI / 2, 0]}
+            >
+              <animated.group
+                name="AR1730_J02"
+                position={[0.76, 0, 0]}
+                rotation={[-Math.PI, 0, 0]}
+              >
+                <animated.group
+                  name="AR1730_J03"
+                  position={[0.2, 0, 0]}
+                  rotation={[-Math.PI / 2, 0, 0]}
+                >
+                  <animated.group
+                    name="AR1730_J04"
+                    position={[0, -0.795, 0]}
+                    rotation={[Math.PI / 2, 0, 0]}
+                  >
+                    <animated.group
+                      name="AR1730_J05"
+                      rotation={[-Math.PI / 2, 0, 0]}
+                    >
+                      <group
+                        name="AR1730_FLG"
+                        position={[0, -0.1, 0]}
+                        rotation={[-Math.PI, 0, 0]}
+                      />
+                      <mesh
+                        name="AR1730_L06"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.AR1730_L06.geometry}
+                        material={materials.Metal}
+                        rotation={[Math.PI / 2, -Math.PI / 2, 0]}
+                      />
+                    </animated.group>
+                    <mesh
+                      name="AR1730_L05"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.AR1730_L05.geometry}
+                      material={materials.Blue}
+                      rotation={[Math.PI / 2, 0, Math.PI / 2]}
+                    />
+                  </animated.group>
+                  <group
+                    name="AR1730_L04"
+                    position={[0, -0.302, 0]}
+                    rotation={[0, 0, -Math.PI / 2]}
+                  >
+                    <mesh
+                      name="_R_AXIS_SW0001002"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes._R_AXIS_SW0001002.geometry}
+                      material={materials.Blue}
+                    />
+                    <mesh
+                      name="_R_AXIS_SW0001002_1"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes._R_AXIS_SW0001002_1.geometry}
+                      material={materials.White}
+                    />
+                  </group>
+                </animated.group>
+                <group
+                  name="AR1730_L03"
+                  rotation={[Math.PI / 2, 0, -Math.PI / 2]}
+                >
+                  <mesh
+                    name="_U_AXIS_SW0001002"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes._U_AXIS_SW0001002.geometry}
+                    material={materials.Blue}
+                  />
+                  <mesh
+                    name="_U_AXIS_SW0001002_1"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes._U_AXIS_SW0001002_1.geometry}
+                    material={materials.Black}
+                  />
+                </group>
+              </animated.group>
+              <mesh
+                name="AR1730_L02"
+                castShadow
+                receiveShadow
+                geometry={nodes.AR1730_L02.geometry}
+                material={materials.Blue}
+                position={[0, -0.157, 0]}
+                rotation={[-Math.PI, -1.571, 0]}
+              />
+            </animated.group>
+            <group
+              name="AR1730_L01"
+              position={[0, -0.336, 0]}
+              rotation={[Math.PI / 2, 0, -Math.PI / 2]}
+            >
+              <mesh
+                name="_S_AXIS_SW0001002"
+                castShadow
+                receiveShadow
+                geometry={nodes._S_AXIS_SW0001002.geometry}
+                material={materials.Blue}
+              />
+              <mesh
+                name="_S_AXIS_SW0001002_1"
+                castShadow
+                receiveShadow
+                geometry={nodes._S_AXIS_SW0001002_1.geometry}
+                material={materials.Black}
+              />
+            </group>
+          </animated.group>
+          <mesh
+            name="AR1730_L00"
+            castShadow
+            receiveShadow
+            geometry={nodes.AR1730_L00.geometry}
+            material={materials.Blue}
+            position={[0, -0.505, 0]}
+            rotation={[Math.PI / 2, 0, -Math.PI / 2]}
+          />
+        </group>
+      </group>
+    </>
+  )
+}

package/src/components/robots/Yaskawa_AR2010.tsx

@@ -0,0 +1,163 @@
+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 Yaskawa_AR2010({
+  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]
+  const rotationSign = [1, -1, 1, 1, 1, 1]
+
+  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
+    jointObjects.forEach(
+      (object, index) =>
+        (object.rotation.y =
+          rotationSign[index]! * jointValues[index]! + rotationOffsets[index]!),
+    )
+  }
+
+  return (
+    <>
+      <RobotAnimator
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+        robotRootObjectName="Scene"
+        onRotationChanged={setRotation}
+      />
+      <group {...props} dispose={null}>
+        <group name="Scene">
+          <group name="AR2010" rotation={[Math.PI / 2, 0, 0]}>
+            <animated.group name="AR2010_J01" rotation={[-Math.PI / 2, 0, 0]}>
+              <animated.group
+                name="AR2010_J02"
+                position={[0.15, 0, 0]}
+                rotation={[Math.PI / 2, 0, Math.PI]}
+              >
+                <animated.group
+                  name="AR2010_J03"
+                  position={[0.76, 0, 0]}
+                  rotation={[Math.PI, 0, 0]}
+                >
+                  <animated.group
+                    name="AR2010_J04"
+                    position={[0.2, 0, 0]}
+                    rotation={[-Math.PI / 2, 0, 0]}
+                  >
+                    <animated.group
+                      name="AR2010_J05"
+                      position={[0, -1.082, 0]}
+                      rotation={[Math.PI / 2, 0, 0]}
+                    >
+                      <animated.group
+                        name="AR2010_J06"
+                        rotation={[-Math.PI / 2, 0, 0]}
+                      >
+                        <group
+                          name="AR2010_FLG"
+                          position={[0, -0.1, 0]}
+                          rotation={[-Math.PI, 0, 0]}
+                        ></group>
+                        <group name="AR2010_L06">
+                          <mesh
+                            name="AR2010_06001"
+                            castShadow
+                            receiveShadow
+                            geometry={nodes.AR2010_06001.geometry}
+                            material={materials.yaskawaBlueMetall}
+                          />
+                          <mesh
+                            name="AR2010_06001_1"
+                            castShadow
+                            receiveShadow
+                            geometry={nodes.AR2010_06001_1.geometry}
+                            material={materials.metall}
+                          />
+                        </group>
+                      </animated.group>
+                      <mesh
+                        name="AR2010_L05"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.AR2010_L05.geometry}
+                        material={materials.yaskawaBlueMetall}
+                      />
+                    </animated.group>
+                    <group name="AR2010_L04">
+                      <mesh
+                        name="AR2010_04001"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.AR2010_04001.geometry}
+                        material={materials.yaskawaBlueMetall}
+                      />
+                      <mesh
+                        name="AR2010_04001_1"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.AR2010_04001_1.geometry}
+                        material={materials.white}
+                      />
+                    </group>
+                  </animated.group>
+                  <group name="AR2010_L03">
+                    <mesh
+                      name="AR2010_03001"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.AR2010_03001.geometry}
+                      material={materials.yaskawaBlueMetall}
+                    />
+                    <mesh
+                      name="AR2010_03001_1"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.AR2010_03001_1.geometry}
+                      material={materials.blackMetall}
+                    />
+                  </group>
+                </animated.group>
+                <mesh
+                  name="AR2010_L02"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.AR2010_L02.geometry}
+                  material={materials.yaskawaBlueMetall}
+                />
+              </animated.group>
+              <group name="AR2010_L01">
+                <mesh
+                  name="AR2010_01001"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.AR2010_01001.geometry}
+                  material={materials.yaskawaBlueMetall}
+                />
+                <mesh
+                  name="AR2010_01001_1"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.AR2010_01001_1.geometry}
+                  material={materials.blackMetall}
+                />
+              </group>
+            </animated.group>
+            <mesh
+              name="AR2010_L00"
+              castShadow
+              receiveShadow
+              geometry={nodes.AR2010_L00.geometry}
+              material={materials.yaskawaBlueMetall}
+              rotation={[-Math.PI / 2, 0, 0]}
+            />
+          </group>
+        </group>
+      </group>
+    </>
+  )
+}

package/src/components/robots/Yaskawa_AR3120.tsx

@@ -0,0 +1,164 @@
+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 Yaskawa_AR3120({
+  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]
+  const rotationSign = [1, -1, 1, 1, 1, 1]
+
+  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
+    jointObjects.forEach(
+      (object, index) =>
+        (object.rotation.y =
+          rotationSign[index]! * jointValues[index]! + rotationOffsets[index]!),
+    )
+  }
+
+  return (
+    <>
+      <RobotAnimator
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+        robotRootObjectName="Scene"
+        onRotationChanged={setRotation}
+      />
+      <group {...props} dispose={null}>
+        <group name="Scene">
+          <animated.group name="AR3120_J00">
+            <animated.group
+              name="AR3120_J01"
+              position={[0.145, 0, 0]}
+              rotation={[-Math.PI / 2, -Math.PI / 2, 0]}
+            >
+              <animated.group
+                name="AR3120_J02"
+                position={[1.15, 0, 0]}
+                rotation={[-Math.PI, 0, 0]}
+              >
+                <animated.group
+                  name="AR3120_J03"
+                  position={[0.25, 0, 0]}
+                  rotation={[-Math.PI / 2, 0, 0]}
+                >
+                  <animated.group
+                    name="AR3120_J04"
+                    position={[0, -1.812, 0]}
+                    rotation={[Math.PI / 2, 0, 0]}
+                  >
+                    <animated.group
+                      name="AR3120_J05"
+                      rotation={[-Math.PI / 2, 0, 0]}
+                    >
+                      <group
+                        name="AR3120_FLG"
+                        position={[0, -0.1, 0]}
+                        rotation={[-Math.PI, 0, 0]}
+                      />
+                      <mesh
+                        name="AR3120_L06"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.AR3120_L06.geometry}
+                        material={materials["Metal.001"]}
+                        rotation={[Math.PI / 2, -Math.PI / 2, 0]}
+                      />
+                    </animated.group>
+                    <mesh
+                      name="AR3120_L05"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.AR3120_L05.geometry}
+                      material={materials["Blue.001"]}
+                      rotation={[Math.PI / 2, 0, Math.PI / 2]}
+                    />
+                  </animated.group>
+                  <group
+                    name="AR3120_L04"
+                    rotation={[Math.PI / 2, -Math.PI / 2, 0]}
+                  >
+                    <mesh
+                      name="R_AXIS_GP20HL001"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.R_AXIS_GP20HL001.geometry}
+                      material={materials["Blue.001"]}
+                    />
+                    <mesh
+                      name="R_AXIS_GP20HL001_1"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.R_AXIS_GP20HL001_1.geometry}
+                      material={materials["White.001"]}
+                    />
+                  </group>
+                </animated.group>
+                <group name="AR3120_L03" rotation={[Math.PI, 0, -Math.PI / 2]}>
+                  <mesh
+                    name="Mesh_3001"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.Mesh_3001.geometry}
+                    material={materials["Blue.001"]}
+                  />
+                  <mesh
+                    name="Mesh_3001_1"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.Mesh_3001_1.geometry}
+                    material={materials["Black.001"]}
+                  />
+                </group>
+              </animated.group>
+              <mesh
+                name="AR3120_L02"
+                castShadow
+                receiveShadow
+                geometry={nodes.AR3120_L02.geometry}
+                material={materials["Blue.001"]}
+                position={[0, -0.146, 0]}
+                rotation={[Math.PI, 0, 0]}
+              />
+            </animated.group>
+            <group
+              name="AR3120_L01"
+              position={[0, -0.228, 0]}
+              rotation={[0, -1.571, 0]}
+            >
+              <mesh
+                name="S_AXIS_GP20HL001"
+                castShadow
+                receiveShadow
+                geometry={nodes.S_AXIS_GP20HL001.geometry}
+                material={materials["Blue.001"]}
+              />
+              <mesh
+                name="S_AXIS_GP20HL001_1"
+                castShadow
+                receiveShadow
+                geometry={nodes.S_AXIS_GP20HL001_1.geometry}
+                material={materials["Black.001"]}
+              />
+            </group>
+          </animated.group>
+          <mesh
+            name="AR3120_L00"
+            castShadow
+            receiveShadow
+            geometry={nodes.AR3120_L00.geometry}
+            material={materials["Blue.001"]}
+            position={[0, -0.54, 0]}
+          />
+        </group>
+      </group>
+    </>
+  )
+}

package/src/components/robots/Yaskawa_AR900.tsx

@@ -0,0 +1,125 @@
+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 Yaskawa_AR900({
+  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="AR900" rotation={[Math.PI / 2, 0, 0]}>
+            <animated.group name="AR900_J01" rotation={[-Math.PI / 2, 0, 0]}>
+              <animated.group
+                name="AR900_J02"
+                position={[0.04, 0, 0]}
+                rotation={[-Math.PI / 2, -Math.PI / 2, 0]}
+              >
+                <animated.group
+                  name="AR900_J03"
+                  position={[0.445, 0, 0]}
+                  rotation={[-Math.PI, 0, 0]}
+                >
+                  <animated.group
+                    name="AR900_J04"
+                    position={[0.04, 0, 0]}
+                    rotation={[-Math.PI / 2, 0, 0]}
+                  >
+                    <animated.group
+                      name="AR900_J05"
+                      position={[0, -0.44, 0]}
+                      rotation={[Math.PI / 2, 0, 0]}
+                    >
+                      <animated.group
+                        name="AR900_J06"
+                        rotation={[-Math.PI / 2, 0, 0]}
+                      >
+                        <group
+                          name="AR900_FLG"
+                          position={[0, -0.08, 0]}
+                          rotation={[-Math.PI, 0, 0]}
+                        />
+                        <mesh
+                          name="AR900_L06"
+                          castShadow
+                          receiveShadow
+                          geometry={nodes.AR900_L06.geometry}
+                          material={materials["#BBA474.001"]}
+                        />
+                      </animated.group>
+                      <mesh
+                        name="AR900_L05"
+                        castShadow
+                        receiveShadow
+                        geometry={nodes.AR900_L05.geometry}
+                        material={materials["#0056b9.001"]}
+                      />
+                    </animated.group>
+                    <mesh
+                      name="AR900_L04"
+                      castShadow
+                      receiveShadow
+                      geometry={nodes.AR900_L04.geometry}
+                      material={materials["#0056b9.001"]}
+                    />
+                  </animated.group>
+                  <mesh
+                    name="AR900_L03"
+                    castShadow
+                    receiveShadow
+                    geometry={nodes.AR900_L03.geometry}
+                    material={materials["#0056b9.001"]}
+                  />
+                </animated.group>
+                <mesh
+                  name="AR900_L02"
+                  castShadow
+                  receiveShadow
+                  geometry={nodes.AR900_L02.geometry}
+                  material={materials["#0056b9.001"]}
+                />
+              </animated.group>
+              <mesh
+                name="AR900_L01"
+                castShadow
+                receiveShadow
+                geometry={nodes.AR900_L01.geometry}
+                material={materials["#0056b9.001"]}
+              />
+            </animated.group>
+            <mesh
+              name="AR900_L00"
+              castShadow
+              receiveShadow
+              geometry={nodes.AR900_L00.geometry}
+              material={materials["#0056b9.001"]}
+              rotation={[-Math.PI / 2, 0, 0]}
+            />
+          </group>
+        </group>
+      </group>
+    </>
+  )
+}

package/src/components/utils/converters.ts

@@ -0,0 +1,23 @@
+export function radiansToDegree(radians: number): number {
+  return radians * (180 / Math.PI)
+}
+
+export function degreesToRadians(degrees: number): number {
+  return degrees * (Math.PI / 180)
+}
+
+export function tryParseJson(json: unknown): any {
+  try {
+    return JSON.parse(json as string)
+  } catch {
+    return undefined
+  }
+}
+
+export function tryStringifyJson(json: unknown): string | undefined {
+  try {
+    return JSON.stringify(json)
+  } catch {
+    return undefined
+  }
+}

package/src/components/utils/errorHandling.ts

@@ -0,0 +1,30 @@
+import { AxiosError } from "axios"
+import { tryStringifyJson } from "./converters"
+
+export function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export function makeShortErrorMessage(err: unknown) {
+  if (err instanceof AxiosError && err.code === "ERR_NETWORK") {
+    return "Failed to connect to the server. Please check your internet connection."
+  } else if (err instanceof AxiosError && err.response) {
+    return `${err.response?.status} ${err.response?.statusText}: ${JSON.stringify(err.response?.data)}`
+  } else if (err instanceof Error) {
+    return err.message
+  } else {
+    return `Unexpected error: ${err}`
+  }
+}
+
+export function makeErrorMessage(err: unknown) {
+  if (err instanceof AxiosError && err.code === "ERR_NETWORK") {
+    return "Failed to connect to the server. Please check your internet connection."
+  } else if (err instanceof AxiosError && err.response) {
+    return `${err.response?.status} ${err.response?.statusText} from ${err.response?.config.url}: ${JSON.stringify(err.response?.data)}`
+  } else if (err instanceof Error) {
+    return err.message
+  } else {
+    return `Unexpected error: ${tryStringifyJson(err) || err}`
+  }
+}