# Again :-) HTML button to 3D scene

**URL:** <https://forum.babylonjs.com/t/again-html-button-to-3d-scene/40214>\
**Category:** Questions\
**Tags:** html, ui\
**Created:** [April 25, 2023, 3:08pm UTC](https://forum.babylonjs.com/t/again-html-button-to-3d-scene/40214 "2023-04-25T15:08:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ivank](https://avatars.discourse-cdn.com/v4/letter/i/df788c/32.png) [@Ivank](https://forum.babylonjs.com/u/Ivank)\
**Post date:** [April 25, 2023, 3:08pm UTC](https://forum.babylonjs.com/t/again-html-button-to-3d-scene/40214/1 "2023-04-25T15:08:51Z")

</div>

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](https://playground.babylonjs.com/#79ASTG), but there the html buttons are created from within the Babylon script tag…

My test example can be found [here](http://www.ivan3d.cz/babytest/).

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…

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [April 25, 2023, 3:34pm UTC](https://forum.babylonjs.com/t/again-html-button-to-3d-scene/40214/2 "2023-04-25T15:34:21Z")

</div>

Hello and welcome!

It is really quite simple but not always evident 🙂  
So, for babylon.js `<script>` tag HTML page with buttons have a look at this page - [Mu-so 2nd Generation 3D](http://mu-so.ru/3d/v2/)  
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…

---

<div class="post-metadata">

**Author:** ![M18](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@M18](https://forum.babylonjs.com/u/M18)\
**Post date:** [April 25, 2023, 3:45pm UTC](https://forum.babylonjs.com/t/again-html-button-to-3d-scene/40214/3 "2023-04-25T15:45:15Z")

</div>

Your problem is that “sphere” is not global.  
Read this article: [Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Scope).

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [April 25, 2023, 4:49pm UTC](https://forum.babylonjs.com/t/again-html-button-to-3d-scene/40214/4 "2023-04-25T16:49:30Z")

</div>

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

> **[Babylon.js docs](https://doc.babylonjs.com/communityExtensions/Unity/Intro)**

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

## ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/d/0d01a3628a65a5fe8b4eb7aef71020b746d23d56.png)

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/d/cda122c06bba0bbe90b19691ddc970ffb7cf512b.png)

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

---

<div class="post-metadata">

**Author:** ![Ivank](https://avatars.discourse-cdn.com/v4/letter/i/df788c/32.png) [@Ivank](https://forum.babylonjs.com/u/Ivank)\
**Post date:** [April 26, 2023, 12:58pm UTC](https://forum.babylonjs.com/t/again-html-button-to-3d-scene/40214/5 "2023-04-26T12:58:42Z")

</div>

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 🙂  
Also thanks for other useful info and links!!!