Using onClick event with Babylon.js

John Does · October 18, 2015

While I was learning the documentation I decided to experiment with the code for a bit.
and I encountered a problem.

I attempted to make a function that makes a new box, then I would make an HTML Button and when clicking this button the function that I made should be triggered and a box should appear on the screen.

Since this didnt work I decided to see if you guys could possibly help me.

Here is the code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        
        <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="http://www.babylonjs.com/cannon.js"></script>
        <script src="http://www.babylonjs.com/oimo.js"></script>
        <script src="http://www.babylonjs.com/babylon.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;

            }

           #mainDiv {
               background-color: green;
               width: 100px;
               height: 100px;
               position: relative;
               bottom: 300px;
           }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
           var scene = new BABYLON.Scene(engine);


           var camera = new BABYLON.FreeCamera("VJ_camera", new BABYLON.Vector3(0, 1, 0), scene);
           camera.attachControl(canvas, true);

           var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

           var ground = BABYLON.Mesh.CreateGround("ground1", 100, 100, 2, scene);

           function random() {

           var box = new BABYLON.Mesh.CreateBox("box1", 2.0, scene);

           }

            return scene;

        };

        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
   <div id="mainDiv" >
   <button onclick="random()">A button</button>
   </div>
</body>
</html>

I'm new to Babylon and also to this forum, though I checked my code several times there might be something that I missed.

And I will say this ahead of time. Thanks!

iiceman · October 19, 2015

Hi John and welcome to the forum!

First of all, and maybe the most important thing: do you already know the playground? If not, it's here: http://www.babylonjs-playground.com/

It always helps if you can recreate your problem there. Then everybody can take a look and try stuff out.

I think the problem with your code is that that click event binding does not work like that.. I think it should throw an error. Have you check your console output if it does? To avoid that you could use jQuery and do something like that:

http://www.babylonjs-playground.com/#1AFXQI

Or without jQuery:

http://www.babylonjs-playground.com/#1AFXQI#1

I hope that helps, if you have a question or if it doesn't work out for you just let us know

John Does · October 19, 2015

Thank you! iiceman this should work fine.

Sign In

Using onClick event with Babylon.js

Recommended Posts

John Does

Link to comment

Share on other sites

iiceman

Link to comment

Share on other sites

John Does

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity