Reloading a Scene on Button Push

[SethRing]

Hey all,

 

I'm trying this again. I have not been able to get a javascript button to change an object in my scene so I'm considering approaching it another way. 

 

In order to create my scene I call a function. Can I just pass the function arguments that tell it what objects to render?

 

Will that become as terribly inefficient as I suspect? 

 

It seems like a pretty poor way to go about it and I wanted to double check before I invest time in writing the code but my basic layout would be something like:

<button onclick="setTop(T111)"><button onclick="setBase(222)">declare global top = NULLdeclare global base = NULLfunction setTop (x)   top = x    createScene(x,base)function setBase (y)   base = x    createScene(top,x)createScene (x,y)     if x != ""       load x    if y != ""       load y

Am I totally off my rocker here?

 

[davrous]

Hi,

 

 I'm afraid I didn't understand what you're trying to do. Can you please try to rephrase / re-explain what you'd like to achieve exactly?

 

Thanks!

 

David

[SethRing]

Hi Davrous,

 

I managed to do what I was thinking in the original post. I was having a ton of trouble figuring out how to make a button outside of the scene change a mesh inside the scene and figured that I might be able to pass the name of the mesh I wanted to change to the function that I use to create the scene. I have done that.

 

The question was, "Is this a bad way to achieve my goal since it reloads the scene every time someone clicks a button?" I'm guessing the answer is yes.

 

By the way, Babylon.js is so fun. Thanks for your work on it

[GameMonetize]

The answer is yes

[Wingnut]

  SethRing, you are not the first person to struggle with event handling (such as onclick).  I tend to look at https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers closely.  But just when you think you have your event handling mastered, you'll find out that the different browsers do things differently.

 

Many folks use jQuery.  There are methods in jQuery that smooth-out the differences between the browsers... so that one jQuery event handling system... works in all the major browsers.  http://learn.jquery.com/events/handling-events/

 

In your situation, you have two buttons and two functions... showTop and showBase.  You made them so that each button runs a different function.  But you could also have a single handleButtons function... because onclick can be told to send the event object... or the THIS object... to the called eventHandler function.  In other words, you can "look up" WHICH button was pressed... from within a single eventHandler (and this includes event handling with jQuery).  Most people do this by "interrogating" the event object that arrives at the event handler function (maybe checking event.target).  Event objects carry lots of information (like which button was pressed).

 

That is step one.  Mastering the browser events.

 

AFTER you have your event handling working the way you want it to, THEN you can do things like looking-up the BJS scene object ( maybe var scene  = engine.scenes[0] ).  And once you have a good scene object, you can use any of its many GET-BY methods... to find the mesh, cameras, lights, that you want to make changes-to.

 

If you keep this two-stage thing in mind, maybe things will be easier.  (and maybe not)    Stage one, get the browser events wired to the event handler functions.  Stage two, inside the handler function(s), use engine, scene, and scene.getxxx,  etc,  to make the wanted changes to the scene.

 

Sometimes, people "reach back" to get data from the button.  Lets say you made your button like this...

<button id="blah" onclick="handleButton(event)" data="mesh118">

Then, for your handler function:

function handleButton(evt) {    var whichbutton = evt.target;    var data = whichbutton.getAttribute("data");    var scene = engine.scenes[0];    var themesh = scene.getMeshByName(data);    themesh.visibility = (themesh.visibility == 1 ? 0 : 1);}

There you have it.  Your button toggles the visibility of whatever mesh name you have put in the button's data attribute.  (Don't quote me.  Remember I am a bad coder.)   But you get the idea.  You reached-back to the button... to get the name of the mesh that is being carried on the button as an attribute.  *shrug*

 

AND... you CAN pass data (like mesh names) in the event handler call as well, as you have been experimenting-with.  I think you know more about that than I do. 

 

I'm sure there are smarter people than I... who can improve this... including you.    But maybe there is something in this ridiculously long comment that can help.  Good luck, party on!