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

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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.