Passing a changing variable into a Babylon Scene (eg from Svelte)

Questions
1

Hi all, a bit of a vague question but thought it might be worth getting some general advice.

I’m trying to put a Babylon scene as a dynamic part of a Svelte application, probably as a sort of background (havnt decided yet…), and I want to pass in variables from the wider application into the Babylon scene to control it somehow. The basic first test I’m making is trying to have the scroll amount rotate a cube.

However I can’t work out how to have this value, that is passed in at the initialisation of the Babylon scene, continue to be linked to the changes that are occurring in the wider application… Previously ive only interacted with a Babylon scene through wrapping it in a class, defining methods on that class and then calling them, but im wondering if there is some better way to do it with observables, or some sort of pass-by-reference method, where the value from svelte is gonna be bound to its use within the scene.

Otherwise maybe i need to have the observable outside of Babylon, and have it call the Babylon method to rotate the cube whenever it changes?

Any advice much appreciated :pray:

2

Hi @awenine and welcome to the community.

This is the way I do it:

Create a global singleton Render class that wraps Babylon.js with your additional functionality, then import the instantiated Render object into your svelve component that contains your render canvas, lastly trigger instantiation of Engine and Scene within your Render object only from within the onMount method of your svelte component.

In your Render class, simply subscribe to or set Svelte global app stores, so whenever they’re updated, it’s reflected across the application, whether 2D UI or 3D.

4 Likes
3

Thank you, i think i have something like the first paragraph (class initialised with component onMount), which is showing the static scene fine, but i havnt looked into stores in Svelte so i guess that’s where the observable stuff happens.

1 Like