Show a popup when the mouse touch a 3d object

Hello ,

Please i need to show a 3D coordinate Popup with a text and image when i touch a 3d object , it is possible ?

Thanks

1 Like

Hey @mixofo,

Check out Raycasts: Raycasts - Babylon.js Documentation - I think this could work for what you’re interested in.

This playground is listed in the documentation and could be good reference.
https://www.babylonjs-playground.com/#KNE0O#84

Here’s the basic idea…you can cast a ray from the point in the view where the touch/click occurs, and then detect the mesh that was hit and draw text and images on screen accordingly.

I’m sure others will have other approaches as well, but this one popped into my head a good option.

Hope this helps!

1 Like

Actually, this is probably the most helpful thing to get you started:
https://doc.babylonjs.com/babylon101/picking_collisions

Hi , thanks for helping , but suddly it is not easy to use it … there is no 3D exemple for option like this ?

Hi guys.

https://www.babylonjs-playground.com/#VE33T#5

There’s a little demo. (Little? heh - not really) :slight_smile:

This one uses GUI 2d system. We also have a GUI 3d system… often used for VR headgear and other VR uses. GUI 2d is more common.

I like using actionManagers on the mesh (OnPointerOverTrigger and OnPointerOutTrigger)… and that’s what I used in that playground (Lines 156-193 area).

I also used another actionManager on the mainStage (OnPickDownTrigger on the ground)… in lines 194-204… to hide the menu.

ActionManager over and out triggers… is ONE main section of this project.

The OTHER main section… is the GUI containers, buttons, header-text, and their “actions”, which DON’T use actionManagers. The buttons use onPointerDownObservable like seen in line 125 and below. Currently, all 4 buttons are “wired” to simply change the color of the sphere… that their master menu parent is “linkWithMesh”-to.

Mainbox is the master container for the menu… and it is linkWithMesh in line 162… to whatever mesh we are “over”. The clicked button is a great grandchild of mainbox, and this causes something fascinating in lines 126, 132, 138, 144…

s.currentTarget.parent.parent.parent.linkedMesh.material.diffuseColor

s.currentTarget is the button… but we want to change the color of the mesh… not the button. The button has no .linkedMesh property, so we need to “find” mainbox… before we can determine WHICH mesh this menu is linked-with.

There is only ONE menu… but it is shared by all mesh… so it can only be open “over” one mesh at a time. But, we can make the menu CHANGE ITSELF… depending upon which mesh it is “hovering”. An example… we could put the NAME of the mesh being hovered… INTO the headerText of the menu… making it APPEAR to be a special menu FOR THAT MESH… when it is ACTUALLY a re-usable single menu… that can adjust itself based-upon which mesh it is hovering. We can “query” the hovered mesh, getting things like its name and current color… and use those values in the menu itself.

In brief, we can tell the menu to go get some information from the mesh it is hovering… and display THAT in the menu, too, if we wish. (like the name of the mesh we are currently hovering-over). Example: https://www.babylonjs-playground.com/#VE33T#6 By adding line 164… we have put the name of the hovered mesh… into the menu’s headertext.text. The menu now APPEARS to be a special menu JUST FOR that mesh… but it is still a single re-usable menu.

Moving on, we need those 3 parent things when a button is clicked. We need the button’s parents’ parents’ parent… which DOES have a .linkedMesh… which we CAN change its material.diffuseColor upon.

Ok, this should keep mixofo thoroughly confused for a while, and cause a brain tumor. Yes, BJS GUI is not a relaxing stroll in the park (super easy)… but it is quite powerful. With power… comes lots of properties and adjustments.

And, not only is GUI studied here, but so are actionManagers, so you are learning two new systems at the same time. And lastly, I am not a pro… far from it. That little menu uses some extra vertical spacing… to make it nicer to open your F12 JS console. If I were more pro, I could use adaptHeightToChildren feature more wisely, and make the menu look great, F12 console opened or not.

This PG took some time to build, and I’m kind of fried on it. Maybe I will get more energy later… and do some more adjustments. Meantime… it’s a starter. ActionManager-based mouseover-mesh GUI 2d menu… a reasonably good beginning, yes? I hope so. We all can play, now… making more versions, doing more tests, converting to GUI 3D if needed, trying to get our buttons to fit containers better, etc.

Party on.

4 Likes

Nice one @Wingnut! Thanks for the playground and explanation! You rock!

2 Likes

You are THE MAN , thank you !

1 Like

@Wingnut Hi there.

Would you mind updating the playgrounds, I am getting Error at [16, 77013]: this is not a constructor thanks.

Hi @ob1 and welcome to the forum. Something has changed in development version 5.00, pinging @Deltakosh , You can swap to earlier versions top right in the playground image

@JohnK Ahhh okey dokey I didn’t see that, thanks - This looks like just the thing I need!

Here is another example - Click on 3D Model Opens Modal Window with Specific WordPress Post – BabylonPress
The modal window can be tuned to your needs.

Thanks for all your help!
I like the glass wobble matterial - I’ve got lots of work to do it seems!

@labris Hi! is the source code for this example available online?

Hello!
The simplest way is to use view-source at the page - view-source:Click on 3D Model Opens Modal Window with Specific WordPress Post – BabylonPress

The script starts at the line 262, with some HTML and CSS before it.

3 Likes

amazing thank you :slightly_smiling_face:

See also simplified HTML version here - Open HTML modal on mesh click

1 Like