feat: expose flange ref

src/components/robots/ABB_1200_07_7.tsx

@@ -6,7 +6,11 @@ ABB_1200_07_7.config = {
   rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function ABB_1200_07_7({ modelURL, ...props }: RobotModelProps) {
+export function ABB_1200_07_7({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -47,7 +51,11 @@ export function ABB_1200_07_7({ modelURL, ...props }: RobotModelProps) {
                     name="ABB_IRB1200_J05"
                     rotation={[Math.PI / 2, 0, -Math.PI]}
                   >
-                    <group name="ABB_IRB1200_FLG" position={[0, 0.082, 0]} />
+                    <group
+                      ref={flangeRef}
+                      name="ABB_IRB1200_FLG"
+                      position={[0, 0.082, 0]}
+                    />
                     <mesh
                       name="visuals006"
                       geometry={nodes.visuals006.geometry}

src/components/robots/ABB_1300_115_10.tsx

@@ -6,7 +6,11 @@ ABB_1300_115_10.config = {
   rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function ABB_1300_115_10({ modelURL, ...props }: RobotModelProps) {
+export function ABB_1300_115_10({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -61,6 +65,7 @@ export function ABB_1300_115_10({ modelURL, ...props }: RobotModelProps) {
                     rotation={[Math.PI / 2, 0, -Math.PI]}
                   >
                     <group
+                      ref={flangeRef}
                       name="ABB_IRB1300_115_10_FLG"
                       position={[0, 0.092, 0]}
                     />

src/components/robots/FANUC_ARC_Mate_100iD.tsx

@@ -6,7 +6,11 @@ FANUC_ARC_Mate_100iD.config = {
   rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function FANUC_ARC_Mate_100iD({ modelURL, ...props }: RobotModelProps) {
+export function FANUC_ARC_Mate_100iD({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -38,6 +42,7 @@ export function FANUC_ARC_Mate_100iD({ modelURL, ...props }: RobotModelProps) {
                         rotation={[-Math.PI / 2, 0, 0]}
                       >
                         <group
+                          ref={flangeRef}
                           name="M10iD_FLG"
                           position={[0, -0.075, 0]}
                           rotation={[-Math.PI, 0, 0]}

src/components/robots/FANUC_ARC_Mate_120iD.tsx

@@ -6,7 +6,11 @@ FANUC_ARC_Mate_120iD.config = {
   rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function FANUC_ARC_Mate_120iD({ modelURL, ...props }: RobotModelProps) {
+export function FANUC_ARC_Mate_120iD({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -38,6 +42,7 @@ export function FANUC_ARC_Mate_120iD({ modelURL, ...props }: RobotModelProps) {
                         rotation={[-Math.PI / 2, 0, 0]}
                       >
                         <group
+                          ref={flangeRef}
                           name="M20iD25_FLG"
                           position={[0, -0.09, 0]}
                           rotation={[-Math.PI, 0, 0]}

src/components/robots/FANUC_CRX10iA.tsx

@@ -6,7 +6,11 @@ FANUC_CRX10iA.config = {
   rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function FANUC_CRX10iA({ modelURL, ...props }: RobotModelProps) {
+export function FANUC_CRX10iA({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -36,6 +40,7 @@ export function FANUC_CRX10iA({ modelURL, ...props }: RobotModelProps) {
                       rotation={[-Math.PI / 2, 0, 0]}
                     >
                       <group
+                        ref={flangeRef}
                         name="CRX10iA_FLG"
                         position={[0, -0.16, 0]}
                         rotation={[-Math.PI, 0, 0]}

src/components/robots/FANUC_CRX10iAL.tsx

@@ -6,7 +6,11 @@ FANUC_CRX10iAL.config = {
   rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function FANUC_CRX10iAL({ modelURL, ...props }: RobotModelProps) {
+export function FANUC_CRX10iAL({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -72,6 +76,7 @@ export function FANUC_CRX10iAL({ modelURL, ...props }: RobotModelProps) {
                     rotation={[-Math.PI / 2, 0, 0]}
                   >
                     <group
+                      ref={flangeRef}
                       name="FANUC_CRX10IAL_FLG"
                       position={[0, -0.16, 0]}
                       rotation={[-Math.PI, 0, 0]}

src/components/robots/FANUC_CRX20iAL.tsx

@@ -6,7 +6,11 @@ FANUC_CRX20iAL.config = {
   rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function FANUC_CRX20iAL({ modelURL, ...props }: RobotModelProps) {
+export function FANUC_CRX20iAL({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -42,6 +46,7 @@ export function FANUC_CRX20iAL({ modelURL, ...props }: RobotModelProps) {
                       rotation={[-Math.PI / 2, 0, 0]}
                     >
                       <animated.group
+                        ref={flangeRef}
                         name="FANUC_CRX20iAL_FLG"
                         position={[0, -0.16, 0]}
                         rotation={[-Math.PI, 0, 0]}

src/components/robots/FANUC_CRX25iA.tsx

@@ -6,7 +6,11 @@ FANUC_CRX25iA.config = {
   rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function FANUC_CRX25iA({ modelURL, ...props }: RobotModelProps) {
+export function FANUC_CRX25iA({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -49,6 +53,7 @@ export function FANUC_CRX25iA({ modelURL, ...props }: RobotModelProps) {
                       rotation={[-Math.PI / 2, 0, 0]}
                     >
                       <group
+                        ref={flangeRef}
                         name="CRX25iA_FLG"
                         position={[0, -0.18, 0]}
                         rotation={[-Math.PI, 0, 0]}

src/components/robots/FANUC_CRX25iAL.tsx

@@ -6,7 +6,11 @@ FANUC_CRX25iAL.config = {
   rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function FANUC_CRX25iAL({ modelURL, ...props }: RobotModelProps) {
+export function FANUC_CRX25iAL({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -37,6 +41,7 @@ export function FANUC_CRX25iAL({ modelURL, ...props }: RobotModelProps) {
                       rotation={[-Math.PI / 2, 0, 0]}
                     >
                       <group
+                        ref={flangeRef}
                         name="CRX10iA_FLG"
                         position={[0, -0.16, 0]}
                         rotation={[-Math.PI, 0, 0]}

src/components/robots/FANUC_LR_MATE_200iD7L.tsx

@@ -10,7 +10,11 @@ FANUC_LR_MATE_200iD7L.config = {
   rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function FANUC_LR_MATE_200iD7L({ modelURL, ...props }: RobotModelProps) {
+export function FANUC_LR_MATE_200iD7L({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const { nodes, materials } = useGLTF(modelURL) as any
   return (
     <group {...props} dispose={null}>
@@ -57,6 +61,7 @@ export function FANUC_LR_MATE_200iD7L({ modelURL, ...props }: RobotModelProps) {
                     rotation={[-Math.PI / 2, 0, 0]}
                   >
                     <animated.group
+                      ref={flangeRef}
                       name="FANUC_LRMATE200ID7L_FLG"
                       position={[0, -0.08, 0]}
                       rotation={[-Math.PI, 0, 0]}

src/components/robots/FANUC_LR_Mate_200iD.tsx

@@ -10,7 +10,11 @@ FANUC_LR_Mate_200iD.config = {
   rotationOffsets: [0, Math.PI / 2, 0, 0, 0, 0],
 }
 
-export function FANUC_LR_Mate_200iD({ modelURL, ...props }: RobotModelProps) {
+export function FANUC_LR_Mate_200iD({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const { nodes, materials } = useGLTF(modelURL) as any
   return (
     <group {...props} dispose={null}>
@@ -52,6 +56,7 @@ export function FANUC_LR_Mate_200iD({ modelURL, ...props }: RobotModelProps) {
                     rotation={[-Math.PI / 2, 0, 0]}
                   >
                     <group
+                      ref={flangeRef}
                       name="FANUC_LRMATE-200ID_FLG"
                       position={[0, -0.08, 0]}
                       rotation={[-Math.PI, 0, 0]}

src/components/robots/KUKA_KR16_R2010_2.tsx

@@ -6,7 +6,11 @@ KUKA_KR16_R2010_2.config = {
   rotationOffsets: [0, 0, -Math.PI / 2, 0, 0, 0],
 }
 
-export function KUKA_KR16_R2010_2({ modelURL, ...props }: RobotModelProps) {
+export function KUKA_KR16_R2010_2({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const { nodes, materials } = useGLTF(modelURL) as any
 
   return (
@@ -52,6 +56,7 @@ export function KUKA_KR16_R2010_2({ modelURL, ...props }: RobotModelProps) {
                     rotation={[-Math.PI / 2, 0, 0]}
                   >
                     <animated.group
+                      ref={flangeRef}
                       name="KUKA_KR16R2010_2_J05"
                       rotation={[-Math.PI / 2, 0, -Math.PI]}
                     >

src/components/robots/KUKA_KR210_R2700.tsx

@@ -6,7 +6,11 @@ KUKA_KR210_R2700.config = {
   rotationOffsets: [0, 0, -Math.PI / 2, 0, 0, 0],
 }
 
-export function KUKA_KR210_R2700({ modelURL, ...props }: RobotModelProps) {
+export function KUKA_KR210_R2700({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
@@ -43,6 +47,7 @@ export function KUKA_KR210_R2700({ modelURL, ...props }: RobotModelProps) {
                         rotation={[Math.PI / 2, 0, 0]}
                       >
                         <group
+                          ref={flangeRef}
                           name="flange"
                           position={[0, -0.215, 0]}
                           rotation={[-Math.PI, 0, 0]}

src/components/robots/KUKA_KR270_R2700.tsx

@@ -6,7 +6,11 @@ KUKA_KR270_R2700.config = {
   rotationOffsets: [0, 0, -Math.PI / 2, 0, 0, 0],
 }
 
-export function KUKA_KR270_R2700({ modelURL, ...props }: RobotModelProps) {
+export function KUKA_KR270_R2700({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
 
   const nodes = gltf.nodes
@@ -42,6 +46,7 @@ export function KUKA_KR270_R2700({ modelURL, ...props }: RobotModelProps) {
                       rotation={[Math.PI / 2, 0, 0]}
                     >
                       <group
+                        ref={flangeRef}
                         name="flange"
                         position={[0, -0.24, 0]}
                         rotation={[-Math.PI, 0, 0]}

src/components/robots/KUKA_KR6_R700_2.tsx

@@ -7,7 +7,11 @@ KUKA_KR6_R700_2.config = {
   rotationSign: [-1, 1, 1, 1, 1, 1],
 }
 
-export function KUKA_KR6_R700_2({ modelURL, ...props }: RobotModelProps) {
+export function KUKA_KR6_R700_2({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
   const { nodes, materials } = useGLTF(modelURL) as any
   return (
     <group {...props} dispose={null}>
@@ -50,6 +54,7 @@ export function KUKA_KR6_R700_2({ modelURL, ...props }: RobotModelProps) {
                     rotation={[-Math.PI / 2, 0, -Math.PI]}
                   >
                     <group
+                      ref={flangeRef}
                       name="KUKA_KR6R700-2_FLG"
                       position={[0, -0.09, 0]}
                       rotation={[-Math.PI, 0, 0]}

src/components/robots/Robot.tsx

@@ -1,12 +1,14 @@
 import { type GroupProps } from "@react-three/fiber"
 
 import type { ConnectedMotionGroup } from "@wandelbots/wandelbots-js"
+import type { Group } from "three"
 import { defaultGetModel, SupportedRobot } from "./SupportedRobot"
 
 export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
   getModel?: (modelFromController: string) => string
   isGhost?: boolean
+  flangeRef?: React.MutableRefObject<Group>
 } & GroupProps
 
 /**
@@ -24,6 +26,7 @@ export function Robot({
   connectedMotionGroup,
   getModel = defaultGetModel,
   isGhost = false,
+  flangeRef,
   ...props
 }: RobotProps) {
   if (!connectedMotionGroup.dhParameters) {
@@ -39,6 +42,7 @@ export function Robot({
       dhParameters={connectedMotionGroup.dhParameters}
       getModel={getModel}
       isGhost={isGhost}
+      flangeRef={flangeRef}
       {...props}
     />
   )

src/components/robots/SupportedRobot.tsx

@@ -53,6 +53,7 @@ export type SupportedRobotProps = {
   dhParameters: DHParameter[]
   getModel?: (modelFromController: string) => string
   isGhost?: boolean
+  flangeRef?: React.MutableRefObject<THREE.Group>
 } & GroupProps
 
 export function defaultGetModel(modelFromController: string): string {
@@ -66,6 +67,7 @@ export const SupportedRobot = externalizeComponent(
     dhParameters,
     getModel = defaultGetModel,
     isGhost = false,
+    flangeRef,
     ...props
   }: SupportedRobotProps) => {
     let Robot: RobotModelComponent | null = null
@@ -276,7 +278,11 @@ export const SupportedRobot = externalizeComponent(
                 rapidlyChangingMotionState={rapidlyChangingMotionState}
                 robotConfig={Robot.config}
               >
-                <Robot modelURL={getModel(modelFromController)} {...props} />
+                <Robot
+                  modelURL={getModel(modelFromController)}
+                  flangeRef={flangeRef}
+                  {...props}
+                />
               </RobotAnimator>
             ) : (
               <DHRobot

src/components/robots/UniversalRobots_UR10CB.tsx

@@ -4,6 +4,7 @@ import type { RobotModelProps } from "./types"
 
 export function UniversalRobots_UR10CB({
   modelURL,
+  flangeRef,
   ...props
 }: RobotModelProps) {
   const gltf = useGLTF(modelURL) as any
@@ -215,6 +216,7 @@ export function UniversalRobots_UR10CB({
                       />
                     </group>
                     <group
+                      ref={flangeRef}
                       name="UNIVERSALROBOTS_UR10CB_FLG"
                       position={[0, 0.116, 0]}
                       rotation={[-Math.PI / 2, 0, 0]}