Sign in to follow this  
XIMRX

How to update BabylonJS scene after changing some JS variables?

Recommended Posts

We can render a scene in Babylon.JS reading values like position/scale from form fields. But does it allow to make changes in scene listening real time changes in input fields like $('input').val()

var cusotm_position = $('input').val();
canvas = document.getElementById("renderCanvas");
engine = new BABYLON.Engine(canvas, true);
scene = createScene(); //draws a mesh at custom_position 
engine.runRenderLoop(function () {
    scene.render();
});


$("input").change(function(){
    cusotm_position = $('input').val();
    delete scene;scene = createScene(); //hangs website for few seconds,need its alternate
});

I tried to call scene.render();  on event listener of change in input but that doesn't seem to be doing anything. Is there anything like refrest/update to change to updated variable values. Better if this can be done without removing everything and recreating fresh scene. As delete scene;scene = createScene(); does refresh everything with new variable values but it hangs the website for few seconds.

Share this post


Link to post
Share on other sites
2 minutes ago, Deltakosh said:

Sorry but I did not see where the custom_position is used in the scene? 

It is complicated just wanted to learn logic how to refresh the scene after the value of variables is changed.

Share this post


Link to post
Share on other sites

You don't need to refresh the scene.  If you change the position of a mesh, it will get updated in the scene automatically.

Like to move a mesh up or down - assuming input was numeric.  Put the change listener inside the createScene() method where you have a reference to the newly created mesh.
 

function createScene() {
  // you have your scene creation logic here and you create the mesh you want to move.

  var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
  // Move the sphere upward 1/2 its height
  sphere.position.y = 1;

  $("input").change(function(){
     cusotm_position = $('input').val();
     sphere.position.y = Number(cusotm_position)
  });

  return scene;
}

You don't want to recreate your scene as that is a heavy task :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.