Jump to content

UI questions


Recommended Posts


I am new to Babylon and HTML and was wondering if there was a way to create a popup window upon clicking on an object (I have everything that I would need already finished except for creating the actual window itself. I know that there is a way to do it with HTML but i was wondering if there is a way within Babylon to do it (which would save me time learning that part in HTML).

If anybody has suggestions about how to go about this I would greatly appreciate it.

Link to comment
Share on other sites

You can catch the click on a object in your 3D scene. Let's say you want to display a pop-up when you click on the object called "thisOne" :

scene.onPointerDown = function(evt, pickResult)
    // If you click on an object from your scene
    if(pickResult.hit) {
        // Get the object name
        var meshName = pickResult.pickedMesh.name;

        if(meshName == "thisOne") {
            // Create your pop-up

Then, if you want to create a "sophisticated" window (instead of the alert function), you can use one of the BabylonJS GUI Extensions : bGUICastorGUI or Canvas2D

It allows you to display text and pictures, with colors and design management.

However, if you only need one window you could have used HTML directly :

var popup = document.createElement('div');
popup.innerHTML = ''; // The HTML code of your pop-up


Link to comment
Share on other sites

Hi guys.  Well said, @Pouet.  On that last version, you might need some CSS for popup. 

popup.style.position = "absolute";
popup.style.top = "20%";
popup.style.left = "20%";
popup.style.border = "4pt outset blue";
popup.style.font = "blah blah blah";
... (lots more, as wanted)

Tour CSS3 styles at http://webpages.charter.net/wingthing/html/propIndex.htm if you like.  Click on any property to view the W3C spec regarding THAT property (click-thru).

If I remember correctly, Android devices using CocoonJS... can't access DOM.  So, createElement and appendChild won't work, there.  For those devices, use bGui, CastorGui, guiDialog, or Canvas2d.  Canvas2D is new, but has fine docs, and really is future-looking.  Besides the many playground demos in the docs, I recently saw another Canvas 2D demo where a lot of text was displayed on a panel, and it was real clean and nice.  http://babylonjs-playground.com/#1S2MDR#2

We MIGHT see bGUI, CastorGUI, and guiDialog re-programmed in the near future... to use Canvas2D as their underlying system.  No promises, just speculation.  :)  

Forum search:  http://www.html5gamedevs.com/search/?&type=forums_topic&nodes=28,16,29,30,31 
Docs search:  http://doc.babylonjs.com/ 
Playground search:  http://doc.babylonjs.com/playground

Good luck, stay in touch.  Further assistance available and gladly shared.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...