Newbie Question - Use html Button to change scene elements

Questions
1

I am a 3D artist, learning to code and have a beginners level understanding of javascript.
I have a Babylon scene included in my webpage.

http://stan.at/LotusFilm/SchussKanal/

(exported from maya as .babylon and used BABYLON.SceneLoader to add it to my canvas)

How can I use the buttons in my webpage to change objects in my scene? (change position/visibility of my meshes)

Im guessing it would be something like this:
button click => calls function to find object in babylon scene (by tag name?) => write new values to objects position => include in update loop

Is there a step by step guide on how to implement this?

this is my code so far:

let canvas = document.getElementById("canvas");
let engine = new BABYLON.Engine(canvas, true);

BABYLON.SceneLoader.Load("content/3D/", "scene_female_sitting_01.babylon",engine,function(myScene){
    myScene.executeWhenReady(function(){
        
        let light_01 = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0,-1,0),myScene);
        light_01.intensity = 10;

        let myCamera = new BABYLON.ArcRotateCamera("Camera",0,0,150,new BABYLON.Vector3(0,10,0),myScene);
        myCamera.setPosition(new BABYLON.Vector3(0,20,-20));
        myCamera.attachControl(canvas, true);
        myScene.activeCamera = myCamera;
        engine.runRenderLoop(function(){
            myScene.render();
        });
    });
});
2

Hi!

This is rather straight forward. Since babylon eventually uses javascript to run the scene, anything you do in javascript, whether external or in your babylon code, will be able to influence your scene.

A very (very!!) simple example here - Babylon.js Playground
Notice the wonderful unstyled button I added at the bottom. clicking on it will make the sphere visible or invisible.

On a small note, babylon offers GUI library as well, so you can actually have the buttons in your scene. But this is a bit more complex.

2 Likes
3

@RaananW
thank you very much! Your simple example was perfect!
got it to work!

1 Like