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

package/src/components/robots/Yaskawa_AR900.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 Yaskawa_AR900({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+Yaskawa_AR900.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function Yaskawa_AR900({ 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="AR900" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/Yaskawa_GP50.tsx

@@ -1,36 +1,19 @@
-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 Yaskawa_GP50({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+Yaskawa_GP50.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+}
+
+export function Yaskawa_GP50({ 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]
-  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="link_0">

package/src/components/robots/types.ts

@@ -0,0 +1,19 @@
+import type { GroupProps } from "@react-three/fiber"
+
+export type RobotModelProps = {
+  modelURL: string
+} & GroupProps
+
+/**
+ * Configuration needed to render a specific robot model that
+ * isn't already handled by the gltf => tsx export
+ */
+export type RobotModelConfig = {
+  rotationOffsets?: number[]
+  rotationSign?: number[]
+}
+
+export type RobotModelComponent = {
+  (props: RobotModelProps): JSX.Element
+  config?: RobotModelConfig
+}