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

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

package/src/components/robots/UniversalRobots_UR10e.tsx

@@ -1,31 +1,14 @@
 import { animated } from "@react-spring/three"
 import { useGLTF } from "@react-three/drei"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
-import type * as THREE from "three"
+import type { RobotModelProps } from "./types"
 
-export function UniversalRobots_UR10e({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR10e({ 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">
           <group name="UR10e" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/UniversalRobots_UR3.tsx

@@ -1,31 +1,14 @@
 import { animated } from "@react-spring/three"
 import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
+import type { RobotModelProps } from "./types"
 
-export function UniversalRobots_UR3({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR3({ 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">
           <group name="UR3" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/UniversalRobots_UR3e.tsx

@@ -1,31 +1,14 @@
-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 UniversalRobots_UR3e({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR3e({ 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="UR3e" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/UniversalRobots_UR5.tsx

@@ -1,31 +1,14 @@
-import { useGLTF } from "@react-three/drei"
-import type * as THREE from "three"
 import { animated } from "@react-spring/three"
-import type { RobotProps } from "./SupportedRobot"
-import RobotAnimator from "./RobotAnimator"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
 
-export function UniversalRobots_UR5({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR5({ 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_UR5CB3_J00">

package/src/components/robots/UniversalRobots_UR5e.tsx

@@ -1,31 +1,14 @@
-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 UniversalRobots_UR5e({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+export function UniversalRobots_UR5e({ 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">
           <group name="UR5e" rotation={[Math.PI / 2, 0, 0]}>

package/src/components/robots/Yaskawa_AR1440.tsx

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

package/src/components/robots/Yaskawa_AR1730.tsx

@@ -1,36 +1,20 @@
-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_AR1730({
-  modelURL,
-  rapidlyChangingMotionState,
-  ...props
-}: RobotProps) {
+Yaskawa_AR1730.config = {
+  rotationOffsets: [0, -Math.PI / 2, 0, 0, 0, 0],
+  rotationSign: [1, -1, 1, 1, 1, 1],
+}
+
+export function Yaskawa_AR1730({ 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">
           <animated.group name="AR1730_J00">