add: allow 'assignTo' for textures to Scene

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

@@ -10,15 +10,25 @@ export default class TexturesLifecycleListener extends BaseLifecycleListener<Tex
 
     let tmp: CreatedInstance<any> | null = instance.parent
 
+    // const parentHostInstance =
+    // parent.metadata.className === 'root' ? this.scene : parent.hostInstance
+
     while (tmp !== null) {
       if (
         tmp.metadata &&
         (tmp.metadata.isMaterial === true ||
           tmp.metadata.className === 'Model' ||
+          tmp.metadata.className === 'root' ||
           tmp.metadata.isLayer === true)
       ) {
         if (assignTo) {
-          assignProperty(texture, tmp.hostInstance, assignTo)
+          if (tmp.metadata.className === 'root') {
+            // textures never have deferred instantiation:
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            assignProperty(texture, texture!.getScene(), assignTo)
+          } else {
+            assignProperty(texture, tmp.hostInstance, assignTo)
+          }
         } else {
           if (tmp.metadata.isLayer === true) {
             continue

packages/static/content/examples/basic/assign-to/AssignTo.tsx

@@ -0,0 +1,44 @@
+import { Color3 } from '@babylonjs/core/Maths/math.color'
+import { Vector3 } from '@babylonjs/core/Maths/math.vector'
+import React from 'react'
+import { Engine, Scene } from 'react-babylonjs'
+
+export const FromInstance = () => (
+  <div className="App">
+    <Engine antialias adaptToDeviceRatio canvasId="babylon-js">
+      <Scene>
+        <arcRotateCamera
+          name="camera1"
+          target={Vector3.Zero()}
+          minZ={0.001}
+          alpha={0}
+          beta={Math.PI / 2}
+          radius={5}
+          lowerBetaLimit={2}
+          upperRadiusLimit={5}
+        />
+        <hemisphericLight name="light1" intensity={0.9} direction={Vector3.Down()} />
+        <sphere name="sphere1" segments={16} diameter={2}>
+          <pbrMaterial
+            name="pbr"
+            albedoColor={new Color3(1, 0.766, 0.336)}
+            metallic={1.0}
+            roughness={1.0}
+            useRoughnessFromMetallicTextureAlpha={false}
+            useRoughnessFromMetallicTextureGreen
+            useMetallnessFromMetallicTextureBlue
+          >
+            <texture url="../../assets/textures/mr.jpg" assignTo="metallicTexture" />
+          </pbrMaterial>
+        </sphere>
+        <cubeTexture
+          level={0.5}
+          assignTo="environmentTexture"
+          rootUrl="../../assets/textures/environment.env"
+        />
+      </Scene>
+    </Engine>
+  </div>
+)
+
+export default FromInstance

packages/static/content/examples/basic/assign-to/EnvironmentTexture.tsx

@@ -0,0 +1,59 @@
+import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture'
+import { Color3 } from '@babylonjs/core/Maths/math.color'
+import { Vector3 } from '@babylonjs/core/Maths/math.vector'
+import React, { useEffect, useState, useRef } from 'react'
+import { Engine, Scene, useEngine } from 'react-babylonjs'
+
+const MyScene = () => {
+  const engine = useEngine()
+  const [_, setTextureReady] = useState(false)
+  const cubeTextureRef = useRef<undefined | CubeTexture>()
+
+  useEffect(() => {
+    if (engine !== null) {
+      console.log('engine', engine)
+      cubeTextureRef.current = new CubeTexture('../../assets/textures/environment.env', engine)
+      setTextureReady(true) // force a re-render to attach
+      console.log('texture:', cubeTextureRef.current)
+    }
+  }, [engine])
+
+  return (
+    <Scene environmentTexture={cubeTextureRef.current}>
+      <arcRotateCamera
+        name="camera1"
+        target={Vector3.Zero()}
+        minZ={0.001}
+        alpha={0}
+        beta={Math.PI / 2}
+        radius={5}
+        lowerBetaLimit={2}
+        upperRadiusLimit={5}
+      />
+      <hemisphericLight name="light1" intensity={0.9} direction={Vector3.Down()} />
+      <sphere name="sphere1" segments={16} diameter={2}>
+        <pbrMaterial
+          name="pbr"
+          albedoColor={new Color3(1, 0.766, 0.336)}
+          metallic={1.0}
+          roughness={1.0}
+          useRoughnessFromMetallicTextureAlpha={false}
+          useRoughnessFromMetallicTextureGreen
+          useMetallnessFromMetallicTextureBlue
+        >
+          <texture url="../../assets/textures/mr.jpg" assignTo="metallicTexture" />
+        </pbrMaterial>
+      </sphere>
+    </Scene>
+  )
+}
+
+export const FromInstance = () => (
+  <div className="App">
+    <Engine antialias adaptToDeviceRatio canvasId="babylon-js">
+      <MyScene />
+    </Engine>
+  </div>
+)
+
+export default FromInstance

packages/static/content/examples/basic/assign-to/index.mdx

@@ -0,0 +1,30 @@
+---
+title: 'assignTo'
+---
+
+This is the example to show the custom property `assignTo`, although it is used
+in many examples it is provided here as a single concept.
+
+NOTE: you can use dots like "mesh.material" and it will follow the objects
+properties as long as they exist.
+
+```jsx
+<Scene>
+  ...
+  <cubeTexture
+    assignTo="environmentTexture"
+    rootUrl={'/assets/environment.env'}
+  />
+</Scene>
+```
+
+[devtool:AssignTo.tsx]
+
+The above was used to assign the `environmentTexture`, which is the same as
+providing a value to the prop as we do in the scene below:
+
+```jsx
+<Scene environmentTexture={cubeTextureInstance}>...</Scene>
+```
+
+[devtool:EnvironmentTexture.tsx]

packages/static/content/examples/basic/from-instance/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'From Instance'
+title: 'fromInstance'
 ---
 
 This is the example to show the custom property 'fromInstance', although it is

packages/static/content/nav.js

@@ -21,6 +21,7 @@ const toc = [
   '/examples/basic/dynamic-terrain',
   '/examples/basic/edges-rendering',
   '/examples/basic/engine-view',
+  '/examples/basic/assign-to',
   '/examples/basic/from-instance',
   '/examples/basic/gizmo',
   '/examples/basic/gizmo-manager',