Dom in Babylonjs Editor?

Questions
1

Hi,
Is there any way to access the DOM when working with the babylonjs editor ?

Context : I’m on a web project running VueJS, working to add WebXR support. I want to make Babylonjs and Vue communicate information and assets (from Vue to babylonjs through the DOM mostly). Is this something that can be done through the editor ?

PS : fairly new to babylonjs + this is my first topic, feel free to remove if you think this is inappropriate here :slight_smile:
PS2 : Can make a feature request out of this topic if you think it’s a good idea!

2

Adding the awesome daddy of the editor @julien-moreau to the thread.

3

A consistent way could be to get a reference to the babylon engine’s canvas then get its owner document. If the canvas’s frame is in a child frame, u can check the window’s .top property for the root frame or iteratively walk up using the .parent property (if needed at all)

.Node.ownerDocument - Web APIs | MDN

. Window.top - Web APIs | MDN

1 Like
4

Hi @Wellandr !
All questions about babylonjs are appropriate here :slight_smile:

I’m not sure to understand, do you mean that you’de like to integrate your Babylon.JS Editor project in a Vue.JS project?

If yes, the “index.ts” file generated by the Editor (when you create a new workspace) is an entry point example that you can highly customize. The only important step is to call the “runScene” function that will attach the scripts once your scene has been loaded. Scripts you have attached can’t be instantiated by you but they can import any other TS file you have in your project. Sharing data/classes/etc. between your Vue app and the babylonjs part is free and there a not guideline I can share with you

I’m adding @jim-decocq in case he wants to share his experience :slight_smile:

5

Like @ julien-moreau say :

  • Import babylon.js.
  • Declare you canvas and engine inside vue.JS
  • Load the scene.babylon from the editor (put this in your assets and keep the same structure with a child Files directory)
  • import all .ts file from src directory inside babylon project.
  • And execute runScene .
  • Launch the renderloop

For all script you need to add the super inside constructor for es6.

I do that with angular and to avoid bind check on babylon engine the renderloop is executed outside ngZone.

1 Like
6

Hi @Wellandr just checking in if you have any further questions? :smiley:

7

Hi @carolhmj, my question was mostly for analyzing the feasibility of using your amazing tools and tech for my project. Thanks to @sebavan @jeremy-coleman and @julien-moreau 's responses I was more confident in the tech and am in the process of making it happen. It is a big solo project, so I may have more questions on this topic, when I get to that point. Thank you all again for your detailed explanations and your time !

3 Likes