add: Sprite Support #306

packages/react-babylonjs/docs/api.md

@@ -34,7 +34,7 @@ Shadows, Textures, etc.)
    vrDeviceOrientationArcRotateCamera, vrDeviceOrientationFreeCamera,
    vrDeviceOrientationGamepadCamera, webXrCamera
 
-3. **Geometries (meshes)** - bbox, capsule, cylinder, dashedLines, decal, disc,
+3. **Geometries (meshes)** - box, capsule, cylinder, dashedLines, decal, disc,
    extrudePolygon, extrudeShape, extrudeShapeCustom, geodesic, goldberg, ground,
    groundFromHeightMap, icoSphere, lathe, lines, lineSystem, plane,
    babylon-polygon, polyhedron, ribbon, sphere, babylon-text, tiledBox,
@@ -50,7 +50,7 @@ Shadows, Textures, etc.)
    mrdlSliderThumbMaterial, multiMaterial, nodeMaterial, occlusionMaterial,
    pbrBaseMaterial, pbrBaseSimpleMaterial, pbrMaterial,
    pbrMetallicRoughnessMaterial, pbrSpecularGlossinessMaterial, pushMaterial,
-   shaderMaterial, standardMateria
+   shaderMaterial, standardMaterial
 
 > note: Materials can have configuration (read-only) properties as classes. With
 > `assignFrom` prop you can declare detailMapConfiguration,
@@ -76,8 +76,9 @@ Shadows, Textures, etc.)
 7. **EffectLayers** - effectLayer, glowLayer, highlightLayer
 
 8. **Behaviors** - autoRotationBehavior, bouncingBehavior, framingBehavior,
-   attachToBoxBehavior, fadeInOutBehavior, multiPointerScaleBehavior,
-   pointerDragBehavior, sixDofDragBehavior
+   attachToBoxBehavior, fadeInOutBehavior, followBehavior,
+   handConstraintBehavior, multiPointerScaleBehavior, pointerDragBehavior,
+   sixDofDragBehavior, surfaceMagnetismBehavior
 
 9. **PostProcessRenderPipelines**: defaultRenderingPipeline,
    lensRenderingPipeline, postProcessRenderPipeline, ssao2RenderingPipeline,
@@ -106,7 +107,9 @@ Shadows, Textures, etc.)
     gizmo, lightGizmo, planeDragGizmo, planeRotationGizmo, positionGizmo,
     rotationGizmo, scaleGizmo, slateGizmo
 
-12. **Others** - adtForMesh, adtForMeshTexture, adtFullScreenUi,
+12. **Sprites** spriteManager, spritePackedManager, thinSprite, sprite
+
+13. **Others** - adtForMesh, adtForMeshTexture, adtFullScreenUi,
     environmentHelper, physicsImpostor, pointsCloudSystem, shadowGenerator /
     cascadedShadowGenerator, layer, utilityLayerRenderer, viewport,
     vrExperienceHelper

packages/react-babylonjs/src/customHosts/SpriteLifecycleListener.ts

@@ -0,0 +1,40 @@
+import { Sprite } from '@babylonjs/core/Sprites/sprite.js'
+import { SpriteManager } from '@babylonjs/core/Sprites/spriteManager.js'
+import { CreatedInstance } from '../CreatedInstance'
+import { assignProperty } from '../helper/property'
+import DeferredCreationLifecycleListener from './DeferredCreationLifecycleListener'
+import { Nullable } from '@babylonjs/core/types'
+import { Scene } from '@babylonjs/core/scene'
+
+export default class SpriteLifecycleListener extends DeferredCreationLifecycleListener<
+  Sprite,
+  any
+> {
+  createInstance = (
+    instance: CreatedInstance<Sprite>,
+    scene: Scene,
+    props: any
+  ): Nullable<Sprite> => {
+    let result: Nullable<Sprite> = null
+    let tmp: CreatedInstance<any> | null = instance.parent
+
+    while (tmp !== null) {
+      // FiberSpriteManager and FiberSpritePackedManager
+      if (
+        tmp.metadata.className.startsWith('FiberSprite') &&
+        tmp.metadata.className.endsWith('Manager')
+      ) {
+        const manager = tmp.hostInstance as SpriteManager
+        instance.hostInstance = result = new Sprite(props.name, manager)
+        break
+      }
+      tmp = tmp.parent
+    }
+
+    if (result === null) {
+      console.warn(`No SpriteManager found as child node of '${props.name ?? 'no name'}'`)
+    }
+
+    return result
+  }
+}

packages/react-babylonjs/src/customHosts/index.ts

@@ -23,6 +23,7 @@ export { default as NodeLifecycleListener } from './NodeLifecycleListener'
 export { default as PhysicsImpostorLifecycleListener } from './PhysicsImpostorLifecycleListener'
 export { default as PhysicsAggregateLifecycleListener } from './PhysicsAggregateLifecycleListener'
 export { default as ShadowGeneratorLifecycleListener } from './ShadowGeneratorLifecycleListener'
+export { default as SpriteLifecycleListener } from './SpriteLifecycleListener'
 export { default as TargetPropsHandler } from './TargetPropsHandler'
 export { default as TexturesLifecycleListener } from './TexturesLifecycleListener'
 export { default as ViewportLifecycleListener } from './ViewportLifecycleListener'