Catch user clicked mesh and do something

Questions
1

Hey there! I am trying to cobble together a virtual-virtual gallery. Cobble because I can find code that does what I want and make it work. To a certain point at least, because I am not a programmer per se.

So I found a few code bits and the starting point of a regular BabylonJS playground scene and with the help of a friend, we got pretty far.

Now the issue is that we’d like to be able to identify where t he user clicks. And as soon as a click is received by one of the images on the wall, something should happen. Ideally in the end it should open a WooCommerce page where one can order a print or postcard. Potentially also digital prints (Wallpaper etc.).

Here’s our playground:

For some reason the playground does not open in the iframe, so here’s the direct link: https://playground.babylonjs.com/#85GXTU#96

Somehow the click is evaluating all the meshes at once and always returns that the mesh called “Figure_Joined” has been clicked and is thereby triggering the UI button.

What we would like is that it returns the mesh name of the mesh that has been clicked and then open up a specific page. i.e. if t he user clicks the mesh “VirtualImage_MESH.000”, it should return the mesh name on the button text. And eventually open a link like “www.mydomain.com/Product/DragonCloud” or alike.

Any help on this would be greatly appreciated!

Thanks,
Alex

1 Like
2

You should simply rely on mesh.name in your raycast code: https://playground.babylonjs.com/#85GXTU#97

I moved things a bit only to focus on how to get the name and assign it to the gui, but you can now revamp it as you see fit.

2 Likes
3

WOW! Thanks @sebavan ! this is awesome. Very cool. Now let’s see if I can grasp what you did. Looks easy enough. Almost like I could not see the forest for the trees.

1 Like