Again :-) HTML button to 3D scene

Questions
,
1

Hello,
I just began to test the Babylon.js as an lightweight alternative to Unity WebGL.

I try to interact with the embedded Babylon 3D scene using (html) buttons defined and placed within html page, calling javascript functions defined in different tag than the 3D scene is created.

I am not able to get reference to the scene objects…

I try to achieve something similar to your Playground example, but there the html buttons are created from within the Babylon script tag…

My test example can be found here.

Sorry for such a newbie question; I believe it has very simple solution indeed, but quite surprisingly I was not able to google the answer anywhere so far…

2

Hello and welcome!

It is really quite simple but not always evident :slight_smile:
So, for babylon.js <script> tag HTML page with buttons have a look at this page - Mu-so 2nd Generation 3D
There are buttons to change textures, stop camera rotation etc.
If you view source of this page - it is well commented and should be clear to understand.
It was my first page with Babylon more than 4 years ago, by the way…

3

Your problem is that “sphere” is not global.
Read this article: Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN.

1 Like
4

Did you know there is a Unity Toolkit to export to Babylon?

buuuut to answer your question. It looks like a scoping thing.

image

image

Your sphere variable exists inside the createScene function scope.
So your secondary outToggleShow does not have access to that variable.

2 Likes
5

Thank You all - Pryme8 , M18 and labris very much for quick and right on the spot responses → to sum up, my problem was caused by the fact that the object I tried to access was defined as local (using const) and not global (using var, such as var sphere; and define it outside of any block/function) - what a shame :slight_smile:
Also thanks for other useful info and links!!!

2 Likes