Changing Objects in the Editor and Adding Events

[dqope21]

I am currently in the process of learning BabylonJS and had a couple very basic questions. 

I'm toying around with the Espilit demo from the main website and I'm having trouble editing the paintings on the walls. I opened espilit.babylon in the editor but I can't seem to change the images. In addition, how could I add event handlers to each painting? For instance, if I wanted to play a different piece of music by pressing spacebar in front of each of the paintings, how might I add this feature? I would appreciate any help! 

Thanks a bunch!

[Wingnut]

Hiya @dqope21, welcome to the forum.  Unfortunately, I don't know anything about the editor.  But yes, you can add keyboard or controller events to any mesh/scene... by attaching an actionManager to the mesh/scene.  (and also using classic DOM events)  (and also observers/observables) 

Now, a spacebar... in a room full of paintings... will need some kind of "which painting?" -checker, of course.  ALL the paintings in the room... could be spacebar-active, so some kind of "which?" discriminator will be needed.  camera.isInFrustum(picture) is a nice "is it in-view" checker. 

I really like our playground editor, for learning BabylonJS.  There you can start simple and small... one mesh, one actionManager, easy javascript. (see demos in actionManager docs).

Diving-in from a large demo like ESpilit... that can be somewhat overwhelming.  And the editor... if it is the "new" one... could still have issues.  But maybe it is fine.  I just don't have the hands-on experience with it... to know, and it is a big job to determine.  Let's ping @Luaacro, in case he wants to follow this conversation (I think he is the chief coder of the  new editor).

But, all in all, yeah, we have full event power, with BabylonJS.  If you know anything about "observers" and "observables", know that we have a very powerful/versatile system of THOSE, too.  We recently got a new 2D system, too... for doing things like mesh name-labels, 2D interaction buttons, popup context menus for mesh, large and small GUI and HUD...  it's marvelous.  AND... IT is nicely event-active, of course.  (no corner-drag-to-resize a 2D panel, yet, but coming soon.)

Yep, BJS does events GREAT.  It takes a little while to get familiar with observables and actionManagers, but... once you do... you have LOTS of event power.  Plus, all the classic DOM events work within the JS and HTML, including window.addEventListener, canvas.addEventListener, etc... all attachable to handlers that can manipulate BabylonJS scene items (lights, mesh, camera, 2D things, anything).  And our handy scene.onDispose function is a perfect place to .removeEventListeners, as wanted.

" how might I add this feature? " - that is difficult for me to answer.  The Espilit demo is fancy... and I would have to dig into the code to find the picture frames, add actionManagers, write a little "which painting is this spacebar for" code, and maybe even learn the new editor (And I don't really like editors. I like code/program-control much better.) 

BUT, if you want to play-with some playgrounds from the actionManager docs... maybe build a simple 4-painting scene... and try to get that "feature" working, I'll be here to help.  In fact, maybe one of the other forum users will build us a little playground demo like that, and show us some actionManagers or keypress handling.  I need a little sleep at the moment.    Hope this has been helpful.  Welcome again, write back.

[dqope21]

@Wingnut 

Thank you so much for your helpful response. I managed to get a GUI to display by integrating CastorGUI upon clicking a painting. We're having trouble making the GUI do what we want. Are there any particular tools that people use with BJS to make this sort of thing easier? 

Also, we're trying to import other obj models into the scene. Is there an easy way to do so? 

[Wingnut]

Hi again.  Cool... glad to hear my words were helpful.  It sounds like you are "on your way", testing 1 of about 6 ways of doing GUI for a scene.  But keep in mind that webGL is still quite new, and still evolving.  So, there hasn't really been enough time for "super tools" to be developed, yet.  In one way of looking at it, BabylonJS is a super-tool, but it is not designed to be that high-level layer where advanced editors are at.

Blender is really our best friend.  Most people create/import their models into Blender, and then use the .babylon exporter.  Then, with a few lines of JS, these .babylon files (a JSON file) can be imported into scenes.  Some folks use the SceneLoader class, and some use the AssetsManager feature.  There are many playground examples of mesh-importing, and a thorough search of the forum will return MUCH talk about importing.  We also have an .OBJ importer, and a gITF importer, and a STL importer... extensions (BJS 'extensions' often require one more <script> element in your project.)

Loading .babylon files requires no extensions/externals, though.  It is "native".

We have people working with Unity, which seems to show some hope for importing "game logic".  But, most BJS game designers write their game logic in JS, within the Babylon scene code.

It doesn't "appear" easy at this time, because it is new for you.  Soon, you will see it get easier.  Give yourself some time/patience... and know you have the best forum on the planet... backing you up all the way.     The core authors of BJS didn't load-down the framework with lots of helpers... for a reason.  It is because making your own helper apps and helper funcs... in JS and HTML.... is darned easy (for most game proggers).  So, most "assistants" are best if coded on a case-by-case basis... specially contoured to the exact task.

Also, it was determined that... everyone wants their "helper app" a little different from other people.  All these versions of the helpers soon become unmanageable, and become more hindrance than help.  We found that when users need a helper... and if BJS hasn't already made it easy... then it is best to write a CUSTOM or "specialty" helper... contoured perfectly for the need.   JS is fast and easy.... to code tools, or to code tools that make tools, or code tools that make tools that make tools that make toys. 

Luuacro and his team's editor... is really a scary walk onto a tree limb.  He could become very busy, branching the editor, making special versions, branding it for companies, on and on.  He could get real busy... just by creating that higher-level tool (a layer above the BJS framework - which this forum talks-about).  I think he is brave, and I applaud his enthusiasm.    Other editor-creators are nearby, as well.  Proggers who try to build (online) scene editors for webGL... are brave trailblazers - my heroes.  Big big BIG undertaking.  I think it takes about 7 million buttons, switches, dials, and knobs... to GUI-use the many features within BJS framework. 

Learn to search.  Take the time to read.  Try not to be in a hurry, and instead... enjoy the road into BabylonJS... it is FUN AS HELL if you're not impatient.  AND it is a road that pays off... and is quite worthwhile.  You won't regret learning to drive BabylonJS.  I've been doing it about 2 years now, and it has been a great journey.  I was also impatient and in a hurry for helpers... in my early months.  But, it's all about search.  LOTS of demented torturing and ingenious ideas... have been tested in playgrounds and discussed in forum threads.  Learn to search for the right keywords, and you will learn fast.

Here's some important links.
  Babylon Docs Site, Playground Search, Forum Search, BJS Homepage, BJS GitHub, Offsite Tutorials List

Note about playground search:  Last I heard, avoid periods, commas, underscores... other odd things... when using playground search.

Be well, good luck.  I'm sure others will comment, too.  I'm certainly not an expert, but I'm still having GOOD BJS FUN after 2+ years.    Still many hopes and dreams, including making model-loading easier/faster.  It's all evolving... and improving by the day.  PARTY!!

[dqope21]

Thanks so much for taking the time to respond. You were incredibly helpful! 

 

 

[julien-moreau]

Hi @dqope21 !

The editor has been updated and available here http://editor.babylonjs.com/

This article shows the beginning of the new Actions Builder tool https://medium.com/babylon-js/programming-with-the-babylon-js-editor-ddab887c243a . The actions builder tends to help you create a BABYLON.ActionManager without any line of code  To illustrate the principle, this article (https://medium.com/babylon-js/actions-builder-b05e72aa541a) shows exactly the way to create actions using the Actions Builder available in the editor I previously shared

Don't hesitate if you have a question ! Or a bug

[julien-moreau]

Forgot that I have a doc on it ! http://doc.babylonjs.com/extensions/using_actions_builder