Jump to content

Using onClick event with Babylon.js

John Does

Recommended Posts

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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <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>
            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;
    <canvas id="renderCanvas"></canvas>
        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 () {

        // Resize
        window.addEventListener("resize", function () {
    <div id="mainDiv" >
    <button onclick="random()">A button</button>


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!

Link to comment
Share on other sites

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:




Or without jQuery:



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

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...