Merge branch 'dev' into IR-4678-Fix-cross-imports-from-spatial-to-engine-package

HexaField · HexaField · commit 609460f91663 · 2025-01-04T14:57:49.000+11:00
diff --git a/resources.json b/resources.json
@@ -616,7 +616,7 @@
     "name": "HDVideo.mp4"
   },
   "public/avatars/Adam.gltf": {
-    "type": "asset",
+    "type": "avatar",
     "tags": [
       "Model"
     ],
@@ -688,15 +688,15 @@
     "name": "ffd667f5c4c57f61a582c47337035d704ae616104df6ee505b3c715455c4c11c.ktx2"
   },
   "public/avatars/Test Avaturn.glb": {
-    "type": "asset",
+    "type": "avatar",
     "tags": [
       "Model"
     ],
     "dependencies": [],
     "name": "Test Avaturn.glb"
   },
   "public/avatars/Test RPM.glb": {
-    "type": "asset",
+    "type": "avatar",
     "tags": [
       "Model"
     ],
diff --git a/src/engine/benchmarks/AvatarBenchmark.tsx b/src/engine/benchmarks/AvatarBenchmark.tsx
@@ -25,7 +25,7 @@ import { useHookstate } from '@ir-engine/hyperflux'
 import { NetworkObjectComponent } from '@ir-engine/network'
 import { TransformComponent } from '@ir-engine/spatial'
 import { RigidBodyComponent } from '@ir-engine/spatial/src/physics/components/RigidBodyComponent'
-import { Object3DComponent } from '@ir-engine/spatial/src/renderer/components/Object3DComponent'
+import { ObjectComponent } from '@ir-engine/spatial/src/renderer/components/ObjectComponent'
 import { VisibleComponent, setVisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
 import React, { useEffect } from 'react'
 import { Group, MathUtils, Quaternion, Vector3 } from 'three'
@@ -189,7 +189,7 @@ const AvatarIKSetupReactor = (props: {
     const uuid = MathUtils.generateUUID()
     setComponent(entity, UUIDComponent, uuid as EntityUUID)
     setComponent(entity, EntityTreeComponent, { parentEntity: rootEntity })
-    setComponent(entity, Object3DComponent, obj3d)
+    setComponent(entity, ObjectComponent, obj3d)
     setComponent(entity, TransformComponent, { position })
     setComponent(entity, VisibleComponent, true)
     setComponent(entity, RigidBodyComponent, { type: 'kinematic' })
diff --git a/src/engine/benchmarks/ParticlesBenchmark.ts b/src/engine/benchmarks/ParticlesBenchmark.ts
@@ -1,7 +1,7 @@
 import { Engine, Entity, getComponent, removeEntity, setComponent } from '@ir-engine/ecs'
 import { ParticleSystemComponent } from '@ir-engine/engine/src/scene/components/ParticleSystemComponent'
 import { TransformComponent } from '@ir-engine/spatial'
-import { Object3DComponent } from '@ir-engine/spatial/src/renderer/components/Object3DComponent'
+import { ObjectComponent } from '@ir-engine/spatial/src/renderer/components/ObjectComponent'
 import { VisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
 import { useEffect } from 'react'
 import { Group, MathUtils } from 'three'
@@ -19,7 +19,7 @@ const createParticleEntity = (rootEntity: Entity) => {
   position.setX(position.x + MathUtils.randFloat(-2.0, 2.0))
   const obj3d = new Group()
   obj3d.entity = entity
-  setComponent(entity, Object3DComponent, obj3d)
+  setComponent(entity, ObjectComponent, obj3d)
   setComponent(entity, TransformComponent, { position })
   setComponent(entity, ParticleSystemComponent)
   setComponent(entity, VisibleComponent, true)
diff --git a/src/engine/benchmarks/PhysicsBenchmark.ts b/src/engine/benchmarks/PhysicsBenchmark.ts
@@ -4,7 +4,7 @@ import { GeometryTypeEnum } from '@ir-engine/engine/src/scene/constants/Geometry
 import { TransformComponent } from '@ir-engine/spatial'
 import { ColliderComponent } from '@ir-engine/spatial/src/physics/components/ColliderComponent'
 import { RigidBodyComponent } from '@ir-engine/spatial/src/physics/components/RigidBodyComponent'
-import { Object3DComponent } from '@ir-engine/spatial/src/renderer/components/Object3DComponent'
+import { ObjectComponent } from '@ir-engine/spatial/src/renderer/components/ObjectComponent'
 import { VisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
 import { useEffect } from 'react'
 import { Group, MathUtils, Vector3 } from 'three'
@@ -24,7 +24,7 @@ const createPhysicsEntity = (rootEntity: Entity) => {
   position.setX(position.x + MathUtils.randFloat(-2.0, 2.0))
   const obj3d = new Group()
   obj3d.entity = entity
-  setComponent(entity, Object3DComponent, obj3d)
+  setComponent(entity, ObjectComponent, obj3d)
   setComponent(entity, TransformComponent, { position, scale })
   setComponent(entity, PrimitiveGeometryComponent, {
     geometryType: GeometryTypeEnum.SphereGeometry,
diff --git a/src/examples/LODs.tsx b/src/examples/LODs.tsx
@@ -22,7 +22,7 @@ import { TransformComponent } from '@ir-engine/spatial/src/transform/components/
 
 import config from '@ir-engine/common/src/config'
 import { Entity } from '@ir-engine/ecs/src/Entity'
-import { GroupComponent, addObjectToGroup } from '@ir-engine/spatial/src/renderer/components/GroupComponent'
+import { GroupComponent, addObjectToGroup } from '@ir-engine/spatial/src/renderer/components/ObjectComponent'
 import { Template } from './utils/template'
 
 // create rings for each LOD
diff --git a/src/examples/Retargeting.tsx b/src/examples/Retargeting.tsx
@@ -25,7 +25,7 @@ import { getGLTFAsync } from '@ir-engine/engine/src/assets/functions/resourceLoa
 import { MixamoBoneNames } from '@ir-engine/engine/src/avatar/AvatarBoneMatching'
 import { TransformComponent } from '@ir-engine/spatial'
 import { NameComponent } from '@ir-engine/spatial/src/common/NameComponent'
-import { GroupComponent, addObjectToGroup } from '@ir-engine/spatial/src/renderer/components/GroupComponent'
+import { GroupComponent, addObjectToGroup } from '@ir-engine/spatial/src/renderer/components/ObjectComponent'
 import { VisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
 import { VRMHumanBoneName } from '@pixiv/three-vrm'
 import { Template } from './utils/template'
diff --git a/src/examples/ShadowExample.tsx b/src/examples/ShadowExample.tsx
@@ -22,7 +22,6 @@ import {
 } from '@ir-engine/spatial'
 import { NameComponent } from '@ir-engine/spatial/src/common/NameComponent'
 import { RendererComponent } from '@ir-engine/spatial/src/renderer/WebGLRendererSystem'
-import { addObjectToGroup } from '@ir-engine/spatial/src/renderer/components/GroupComponent'
 import { MeshComponent } from '@ir-engine/spatial/src/renderer/components/MeshComponent'
 import { SceneComponent } from '@ir-engine/spatial/src/renderer/components/SceneComponents'
 import { VisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
@@ -60,14 +59,12 @@ const SceneReactor = (props: { sceneEntity: Entity }) => {
     setComponent(platformEntity, VisibleComponent)
     setComponent(platformEntity, NameComponent, 'Platform')
     setComponent(platformEntity, MeshComponent, new Mesh(new BoxGeometry(), new MeshLambertMaterial()))
-    addObjectToGroup(platformEntity, getComponent(platformEntity, MeshComponent))
     setComponent(platformEntity, ShadowComponent, { cast: false })
 
     setComponent(boxEntity, TransformComponent, { position: new Vector3(0, 0.5, 0) })
     setComponent(boxEntity, VisibleComponent)
     setComponent(boxEntity, NameComponent, 'Box')
     setComponent(boxEntity, MeshComponent, new Mesh(new BoxGeometry(), new MeshLambertMaterial()))
-    addObjectToGroup(boxEntity, getComponent(boxEntity, MeshComponent))
     setComponent(boxEntity, ShadowComponent, { receive: false })
 
     setComponent(directionalLightEntity, TransformComponent, {
diff --git a/src/examples/Splines.tsx b/src/examples/Splines.tsx
@@ -6,7 +6,7 @@ import { createEntity } from '@ir-engine/ecs/src/EntityFunctions'
 import { SplineComponent } from '@ir-engine/engine/src/scene/components/SplineComponent'
 import { SplineTrackComponent } from '@ir-engine/engine/src/scene/components/SplineTrackComponent'
 import { NameComponent } from '@ir-engine/spatial/src/common/NameComponent'
-import { addObjectToGroup } from '@ir-engine/spatial/src/renderer/components/GroupComponent'
+import { addObjectToGroup } from '@ir-engine/spatial/src/renderer/components/ObjectComponent'
 import { VisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
 import { TransformComponent } from '@ir-engine/spatial/src/transform/components/TransformComponent'
 import { BoxGeometry, Mesh, MeshBasicMaterial, Quaternion, SphereGeometry, Vector3 } from 'three'
diff --git a/src/examples/XRLightEstimation.tsx b/src/examples/XRLightEstimation.tsx
@@ -7,7 +7,7 @@ import { XRLightProbeState } from '@ir-engine/spatial/src/xr/XRLightProbeSystem'
 import { getComponent, setComponent } from '@ir-engine/ecs/src/ComponentFunctions'
 import { createEntity, removeEntity } from '@ir-engine/ecs/src/EntityFunctions'
 import { NameComponent } from '@ir-engine/spatial/src/common/NameComponent'
-import { addObjectToGroup } from '@ir-engine/spatial/src/renderer/components/GroupComponent'
+import { addObjectToGroup } from '@ir-engine/spatial/src/renderer/components/ObjectComponent'
 import { VisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
 import { TransformComponent } from '@ir-engine/spatial/src/transform/components/TransformComponent'
 import { Template } from './utils/template'
diff --git a/src/examples/XRMeshes.tsx b/src/examples/XRMeshes.tsx
@@ -4,7 +4,6 @@ import { BufferGeometry, Mesh, MeshBasicMaterial, MeshNormalMaterial, Vector3 }
 import { setComponent, useComponent } from '@ir-engine/ecs/src/ComponentFunctions'
 import { createEntity, removeEntity, useEntityContext } from '@ir-engine/ecs/src/EntityFunctions'
 import { NameComponent } from '@ir-engine/spatial/src/common/NameComponent'
-import { addObjectToGroup, removeObjectFromGroup } from '@ir-engine/spatial/src/renderer/components/GroupComponent'
 
 import { EntityTreeComponent } from '@ir-engine/ecs'
 import { QueryReactor } from '@ir-engine/ecs/src/QueryFunctions'
@@ -13,6 +12,8 @@ import { ColliderComponent } from '@ir-engine/spatial/src/physics/components/Col
 import { RigidBodyComponent } from '@ir-engine/spatial/src/physics/components/RigidBodyComponent'
 import { CollisionGroups, DefaultCollisionMask } from '@ir-engine/spatial/src/physics/enums/CollisionGroups'
 import { BodyTypes, Shapes } from '@ir-engine/spatial/src/physics/types/PhysicsTypes'
+import { MeshComponent } from '@ir-engine/spatial/src/renderer/components/MeshComponent'
+import { VisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
 import { XRDetectedMeshComponent } from '@ir-engine/spatial/src/xr/XRDetectedMeshComponent'
 import { XRDetectedPlaneComponent } from '@ir-engine/spatial/src/xr/XRDetectedPlaneComponent'
 import { Template } from './utils/template'
@@ -22,35 +23,38 @@ const normalMaterial = new MeshNormalMaterial({ opacity: 0.5, transparent: true
 
 export const DetectedPlanes = () => {
   const entity = useEntityContext()
-
   const xrPlane = useComponent(entity, XRDetectedPlaneComponent)
 
   useEffect(() => {
     if (!xrPlane.geometry.value) return
-    const transparentMesh = new Mesh(xrPlane.geometry.value as BufferGeometry, normalMaterial)
-    addObjectToGroup(entity, transparentMesh)
-    setComponent(
-      entity,
-      NameComponent,
-      'Plane ' + (xrPlane.plane.value.semanticLabel ?? xrPlane.plane.orientation.value)
-    )
-
+    const planeName =
+      'XR Plane ' + entity + '(' + (xrPlane.plane.value.semanticLabel ?? xrPlane.plane.orientation.value) + ')'
     const geometry = xrPlane.geometry.value as BufferGeometry
     const box = geometry.boundingBox!
     const height = box.max.x - box.min.x
     const width = box.max.z - box.min.z
 
     /** Create a child entity such that we can have a distinct scale for the collider */
 
+    const meshEntity = createEntity()
+
+    setComponent(meshEntity, NameComponent, planeName + ' Mesh')
+    setComponent(meshEntity, EntityTreeComponent, {
+      parentEntity: entity
+    })
+    setComponent(meshEntity, TransformComponent)
+    setComponent(meshEntity, VisibleComponent)
+    const transparentMesh = new Mesh(xrPlane.geometry.value as BufferGeometry, normalMaterial)
+    setComponent(meshEntity, MeshComponent, transparentMesh)
+
     const colliderEntity = createEntity()
-    setComponent(colliderEntity, NameComponent, 'Plane ' + entity + ' Collider')
+    setComponent(colliderEntity, NameComponent, planeName + ' Collider')
     setComponent(colliderEntity, EntityTreeComponent, {
       parentEntity: entity
     })
     setComponent(colliderEntity, TransformComponent, {
       scale: new Vector3(height, 0.01, width)
     })
-
     setComponent(colliderEntity, RigidBodyComponent, {
       type: BodyTypes.Fixed
     })
@@ -60,15 +64,11 @@ export const DetectedPlanes = () => {
       collisionMask: DefaultCollisionMask
     })
     return () => {
+      removeEntity(meshEntity)
       removeEntity(colliderEntity)
-      removeObjectFromGroup(entity, transparentMesh)
     }
   }, [xrPlane.geometry])
 
-  useEffect(() => {
-    if (!xrPlane.value || !xrPlane.geometry.value) return
-  }, [xrPlane?.geometry])
-
   return null
 }
 
@@ -79,20 +79,36 @@ export const DetectedMeshes = () => {
 
   useEffect(() => {
     if (!xrmesh.geometry.value) return
-    const outlineMesh = new Mesh(xrmesh.geometry.value as BufferGeometry, wireframeMaterial)
-    addObjectToGroup(entity, outlineMesh)
-    setComponent(entity, NameComponent, 'Plane ' + (xrmesh.mesh.value.semanticLabel ?? entity))
 
-    setComponent(entity, RigidBodyComponent, {
+    const meshName = 'XR Mesh ' + (xrmesh.mesh.value.semanticLabel ?? entity)
+
+    const meshEntity = createEntity()
+    setComponent(meshEntity, NameComponent, meshName + ' Mesh')
+    setComponent(meshEntity, EntityTreeComponent, {
+      parentEntity: entity
+    })
+    setComponent(meshEntity, TransformComponent)
+    setComponent(meshEntity, VisibleComponent)
+    const mesh = new Mesh(xrmesh.geometry.value as BufferGeometry, wireframeMaterial)
+    setComponent(meshEntity, MeshComponent, mesh)
+
+    const colliderEntity = createEntity()
+    setComponent(colliderEntity, NameComponent, meshName + ' Collider')
+    setComponent(colliderEntity, EntityTreeComponent, {
+      parentEntity: entity
+    })
+    setComponent(colliderEntity, TransformComponent)
+    setComponent(colliderEntity, RigidBodyComponent, {
       type: BodyTypes.Fixed
     })
-    setComponent(entity, ColliderComponent, {
+    setComponent(colliderEntity, ColliderComponent, {
       shape: Shapes.Mesh,
       collisionLayer: CollisionGroups.Ground,
       collisionMask: DefaultCollisionMask
     })
     return () => {
-      removeObjectFromGroup(entity, outlineMesh)
+      removeEntity(meshEntity)
+      removeEntity(colliderEntity)
     }
   }, [xrmesh.geometry])
 
diff --git a/src/examples/componentExamples/componentExamples.tsx b/src/examples/componentExamples/componentExamples.tsx
@@ -1,5 +1,6 @@
 import config from '@ir-engine/common/src/config'
 import {
+  Easing,
   Entity,
   EntityTreeComponent,
   UUIDComponent,
@@ -36,6 +37,7 @@ import { useHookstate } from '@ir-engine/hyperflux'
 import { TransformComponent } from '@ir-engine/spatial'
 import { CallbackComponent } from '@ir-engine/spatial/src/common/CallbackComponent'
 import { NameComponent } from '@ir-engine/spatial/src/common/NameComponent'
+import { Q_IDENTITY, Q_Y_180 } from '@ir-engine/spatial/src/common/constants/MathConstants'
 import { setVisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
 import { ObjectLayerMasks } from '@ir-engine/spatial/src/renderer/constants/ObjectLayers'
 import React, { useEffect } from 'react'
@@ -80,6 +82,63 @@ export const subComponentExamples = [
       return null
     }
   },
+  {
+    name: 'Transitions',
+    description: 'Add transitions to your scene',
+    Reactor: (props: { parent: Entity; onLoad: (entity: Entity) => void }) => {
+      const { parent, onLoad } = props
+      const entity = useExampleEntity(parent)
+      const gltfComponent = useOptionalComponent(entity, GLTFComponent)
+
+      useEffect(() => {
+        setComponent(entity, NameComponent, 'Transition-Example')
+        setComponent(entity, GLTFComponent, {
+          cameraOcclusion: true,
+          src:
+            config.client.fileServer +
+            '/projects/ir-engine/ir-development-test-suite/assets/GLTF/Flight%20Helmet/FlightHelmet.gltf'
+        })
+        setVisibleComponent(entity, true)
+        getComponent(entity, TransformComponent).scale.set(3, 3, 3)
+
+        let id: any
+
+        const transitionA = () => {
+          TransformComponent.setTransition(entity, 'position.y', 2, {
+            duration: 1000,
+            easing: Easing.exponential.inOut
+          })
+          TransformComponent.setTransition(entity, 'rotation', Q_Y_180, {
+            duration: 500,
+            easing: Easing.exponential.inOut
+          })
+          id = setTimeout(transitionB, 1000)
+        }
+
+        const transitionB = () => {
+          TransformComponent.setTransition(entity, 'position.y', 0, {
+            duration: 1000,
+            easing: Easing.exponential.inOut
+          })
+          TransformComponent.setTransition(entity, 'rotation', Q_IDENTITY, {
+            duration: 500,
+            easing: Easing.exponential.inOut
+          })
+          id = setTimeout(transitionA, 1000)
+        }
+
+        transitionA()
+
+        return () => clearTimeout(id)
+      }, [])
+
+      useEffect(() => {
+        if (gltfComponent?.progress.value === 100) onLoad(entity)
+      }, [gltfComponent?.progress])
+
+      return null
+    }
+  },
   {
     name: 'Avatars',
     description: 'Add avatars to your scene',
diff --git a/src/examples/gltfViewer.tsx b/src/examples/gltfViewer.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react'
 import { useDrop } from 'react-dnd'
 
-import { getComponent, setComponent } from '@ir-engine/ecs/src/ComponentFunctions'
+import { getComponent, removeComponent, setComponent } from '@ir-engine/ecs/src/ComponentFunctions'
 import { DndWrapper } from '@ir-engine/editor/src/components/dnd/DndWrapper'
-import { getMutableState, getState, useHookstate } from '@ir-engine/hyperflux'
+import { getMutableState, getState, useHookstate, useMutableState } from '@ir-engine/hyperflux'
 
-import { Engine, Entity, EntityUUID, UUIDComponent, createEntity, removeEntity } from '@ir-engine/ecs'
+import { Entity, EntityUUID, UUIDComponent, createEntity, removeEntity } from '@ir-engine/ecs'
 
 import config from '@ir-engine/common/src/config'
 import { EntityTreeComponent } from '@ir-engine/ecs'
@@ -123,21 +123,31 @@ const GLTF = () => {
 }
 
 export default function GLTFViewer() {
+  const viewerEntity = useMutableState(EngineState).viewerEntity.value
+
   useEffect(() => {
     const bgColor = document.body.style.backgroundColor
     document.body.style.backgroundColor = 'gray'
     getMutableState(RendererState).gridVisibility.set(true)
     getMutableState(RendererState).physicsDebug.set(true)
-    const entity = Engine.instance.viewerEntity
-    setComponent(entity, CameraOrbitComponent)
-    setComponent(entity, InputComponent)
-    getComponent(entity, CameraComponent).position.set(0, 3, 4)
 
     return () => {
       document.body.style.backgroundColor = bgColor
     }
   }, [])
 
+  useEffect(() => {
+    if (!viewerEntity) return
+    setComponent(viewerEntity, CameraOrbitComponent)
+    setComponent(viewerEntity, InputComponent)
+    getComponent(viewerEntity, CameraComponent).position.set(0, 3, 4)
+
+    return () => {
+      removeComponent(viewerEntity, CameraOrbitComponent)
+      removeComponent(viewerEntity, InputComponent)
+    }
+  }, [viewerEntity])
+
   return (
     <div
       id="dnd-container"
diff --git a/src/examples/immersiveAR.tsx b/src/examples/immersiveAR.tsx
diff --git a/src/examples/immersiveVR.tsx b/src/examples/immersiveVR.tsx
diff --git a/src/examples/mountPoint.tsx b/src/examples/mountPoint.tsx
diff --git a/src/examples/multipleScenes.tsx b/src/examples/multipleScenes.tsx
diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
