Can BABYLON.SceneLoader accept values in a state variable?

Questions
1

I have this code in App.js


 const [sceneFilename, setSceneFilename] = React.useState(window.location + "formats/1/models/statue.glb");

and this code in Viewer.js

import React from "react";
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder } from "@babylonjs/core";
//import SceneComponent from "./SceneComponent"; // uses above component in same directory
import SceneComponent from 'babylonjs-hook'; // if you install 'babylonjs-hook' NPM.
import "./App.css";
import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders';



const onSceneReady = (scene) => {
  // This creates and positions a free camera (non-mesh)
  var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

  // This targets the camera to scene origin
  camera.setTarget(Vector3.Zero());

  const canvas = scene.getEngine().getRenderingCanvas();

  // This attaches the camera to the canvas
  camera.attachControl(canvas, true);

  // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
  var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

  // Default intensity is 1. Let's dim the light a small amount
  light.intensity = 0.7;



  BABYLON.SceneLoader.Append("", "", scene, function (scene) {
    // do something with the scene
});

};



export default (props) => (
  <div>
    <SceneComponent antialias onSceneReady={onSceneReady} id="metapal-canvas" />
  </div>
)

Is it possible to include the value of the variable sceneFilename from App.js as a parameter in

  BABYLON.SceneLoader.Append("", "", scene, function (scene) {
    // do something with the scene
});

? . The variable sceneFilename contains the entire path and file detail, and I have tested by hardcoding it which works. I was thinking that as App.js is the parent of Viewer.js and the const is a state variable (or at least i think it is) that I should simply be able to pass the sceneFilename as a parameter in the scene loader. As I am a new learner I am not sure if I have fully understood things so apologies if this all sounds a bit loony. Could someone advise?
Thanks in advance.

2

That’s more a react question than a babylon question, but - what stops you from providing the props to the SceneComponent and use it when calling the onSceneReady function?
Otherwise, you could use a react context (if it makes sense in your case).

1 Like
3

Thanks for this - i will try this approach. Thanks again

1 Like