3D mesh onmouseover

[jerome]

Hi,

 

I want to reproduce the same kind of behavior as DOM element onmouseover.

 

Say I have some meshes in the in space, I would like to display a positioned DOM element (anyway, it's not the topic, I just want to get the cursor screen x/y ) when the cursor passes upon a mesh.

 

I saw there were a scene pick() method and abstractMesh isPickable() property. I read the tuto about picking and read the PG code about drag'n'drop also.

I don't want to catch a click event, in other terms discover what mesh is under cursor xy on click.

 

I just need to get cursor screen xy when it passes on a mesh.

 

I really don't know how to approach the problem because meshes don't trigger any mouse events by themselves.

 

Get the mesh, if any, under cursor screen x/y at each frame ?

Any better idea ?

[jahow]

Hey,

 

You can do a pick() every frame, this way you will always know which mesh is hovered. This can be costly in resources though, so you need to make sure that only the meshes of interest have the property isPickable set to true. Also using an octree may speed up this operation as well.

[RaananW]

scene.meshUnderPointer will deliver the current mesh under the pointer.

You can also use actions (OnPointerOverTrigger, OnPointerOutTrigger)

If you want native support, I once showed that it is technically possible - http://my-cac.com/babylon/ , this requires however changing the scene a bit to support native javascript events (here - )

[jerome]

fast, clear, smart.

Raanan as usual

[jerome]

So you would test it each frame, in the registerBeforeRender(), right ?

[jahow]

Raanan, your demo is awesome.

[RaananW]

@Jerome - So many ways to do that, the question is what you need. Actions will work on specific meshes, if you want something that works on all (and always), use the scene.beforeRender or the OnEveryFrame trigger for a scene Action.

 

@Jahow - Thanks! :-) I just wanted to see how well Babylon and Native JS play together. 

[jerome]

I don't want any BJS Action.

I wish some kind of event triggered when the cursor passes upon a mesh (or triggable mesh if better in terms of performance), just like the onmouseover event is triggered when the cursor passes upon a DOM element.

 

I'm re-starting to code my network 3D weathermap : http://logiciels.iut-rodez.fr/proto/weathermap/ and I realize that data aren't readable (too many at once). So I think I will make some positioned CSS/DOM element appear (HUD-like) on cursor position when it will pass upon a network link.

And give up all these live-updated bad performance dynamicTextured text sprites.

[jerome]

BTW, I vote for your scene code modification to be PR

[RaananW]

a BJS action is not mroe than a function that is triggered when something happens. You can trigger a native javascript event on each PointerOver and PointerOut event (mouseover and mouseout) and use those somewhere else. 

You can do the same with beforeRender (check if the mesh under the pointer has changed and trigger an event)

 

About my code - I have modified the Scene class quite a lot - this to allow external developers to use meshes as HTML elements. I wanted to push a small change to the scene that will allow to create this functionality externally, i'll try finding the time and maybe implement it soon. I have some other ideas how this can be a nice feature to have 

[jerome]

http://babylondoc.azurewebsites.net/page.php?p=22531

 

got it !

 

... in the doc jungle

[jerome]

I'm just trying to understand the Action + actionManager working.

 

I would first attach a new actionManager to every mesh (to react on mouse over) of my scene, here my network links.

Then I would register an action to trigger my own JS code. In my case (display some DOM element external to BJS), it would be probably a ExecuteCodeAction action, wouldn't be ?

 

# 1 ) I don't understand if the mesh reference is then passed to the Action or not when triggered ? else how to execute some custom code related to the mesh which triggers this action ?

 

# 2 ) If the same Action code must be executed on the same events for every mesh (but having a different behavior depending on each mesh), do I need to attach to each mesh its own instance of actionManager or the same unique instance can shared between (attach to) all meshes.

[RaananW]

To your second question - yep, an actionManager per mesh.

 

To your first and for general information - http://www.babylonjs-playground.com/?17 , I always prefer seeing code. Apart from relaxing you, it can show you how to use everything    Yes, the ExecuteCodeAction is your best option, and since it is a function in an inner scope, you can reference the mesh that was defined externally. 

 

But really, if you want it for all meshes and not only for specific ones, use the scene's beforeRender. otherwise you will have to add an action manager to each and every mesh you add. 

[jerome]

back on this topic.

 

As Raanan suggested, I want to display some data when the pointer passes on any mesh of my scene. So I just tried to use it directly in the registerBeforeRender() method instead of adding an action manager per mesh.

http://www.babylonjs-playground.com/#HIASF

 

please open your browser console, line 31 :

console.log(scene.meshUnderPointer);

I just get undefined or null (wether I re-run or not).. but never the pointed mesh.

The scene object seems to be well accessible in the registerBeforeRender() method.

Any idea ?

[RaananW]

This will cause it to work - http://www.babylonjs-playground.com/#HIASF#1

The meshUnderPointer is only set if the mesh is pickable and if it has an action manager with picking triggers. Maybe this should be changed (?), not sure if this is the way it was intended to be used.

Anyway, you can also do this - 

http://www.babylonjs-playground.com/#HIASF#2

which is actually using the function that is implemented in the scene for the exact same thing 

[jerome]

Thank you, Raanan. Always the right answer, the right way ! 

 

I clearly wouldn't have guess this sophisticated way to do.