Jump to content

Async native js events


Recommended Posts

Hi guys,


Working with web designers and old school web devs I have come to realize that they are sometimes very fixed about the way they work. I was looking for a way to integrate babylon and the jquery generation, and came up with this:


Try hovering over the meshes and clicking on them, you will get the idea. Also see the html markup - it is all added dynamically. 


The idea is that - I have extended the action manager's functionality in babylon's scene to trigger (async) javascript events with the needed details. For that I had to change the way nodes are added to the scene.

Supported events:

Canvas is triggering "nodeAdded" and "nodeRemoved" for three kinds of bjs nodes - camera, light and mesh. It is also triggering "keyUp" and "keyDown" with babylon's ActionEvent.

a mesh node is triggering "pick", "pointerOver" and "pointerOut". It can also trigger the intersection events, but for that we need an active actionManager (otherwise intersections will have to be constantly inspected).

This all can be turned on and off with a flag in the scene : scene.asyncEventTriggers = true

The changes are in my bjs github fork, if someone wants to see how it was done.


Hope someone finds it useful! 


I believe this will be a wonderful way of separating between a 3d canvas and the rest of the website, if a canvas is not in full screen. I think everyone can benefit from this. I know that it could have been developed using an actionManager, but then i would have to add an action manager to each mesh. Since the pick, pointerOut and pointerOver events are already being constantly tested, why not simply trigger them :-)


** Note - I write "async", because js event are exactly that - async. meaning, you can't really know if they got triggered before the scene was rendered or after. I wouldn't use it to make immediate changes in the scene itself. Or simply know that it can take a frame or two before the changes are there.

Link to comment
Share on other sites

Hi dad72,


this relies on some changes made inside the scene class and other nodes, and based on the current master branch of babylon. You are more than welcomed to take the js file i used on the site i posted and use it, I can also explain fully how to use it. I will pull the changes made to the engine and try updating it if you (or anyone else) wants. I guess it might be useful for some projects.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...