Newbie Q - Can I know which vertex (or x/y/z coord) of a mesh the mouse clicked on?

Questions
1

I am BRAND NEW to babylon.js and VERY impressed so far.

I’m hoping to use the platform to build a 3d space where the user does a lot of direct interactions with the 3d objects. As a basic test, I’ve build a simple “box”

        	myMesh = BABYLON.MeshBuilder.CreateBox("box", { size: 1}, scene);

I then added an ActionManager to the box, and I can click (mousedown in this case) on the box – YAY :slight_smile:

            myMesh .actionManager = new BABYLON.ActionManager(scene);
            
            myMesh .actionManager.registerAction(
            	    new BABYLON.ExecuteCodeAction(
            	    		{
            	    			trigger: BABYLON.ActionManager.OnPickDownTrigger
            	    		},
            	    		function (event) { 
            	    			console.log(event) 
            	    		}
            	        )
            	);

Then I get stuck. What I want to do is get details on “where” on the box I clicked. A very simple example would be for me to paint numbers on the sides of the box, turning it into a 6-sided die. I’d want to know which “face” of the die the user clicked on (1-6).

When I look at the “event” in the console, I can easily get the clientX and clientY of where in the browser I clicked, but what I’m looking for is some way to determine exactly where on the box I clicked. A set of x/y/z coords would do, or perhaps some way of knowing the index of the vertex of the mesh that got the click.

In a more advanced example, I’d paint a .png on each side of the box, and then want to use the coordinates of the click to let me know which “pixel” of the .png the user clicked on (older engineers will remember “image map” from way back in the day).

I don’t know if this is possible. I imagine I could achieve the “which face I clicked on” by making 6 separate meshes and then putting them all together under a single parent - but that still would not give me the “image map” functionality that I’m looking for.

Any pointers would be VERY MUCH appreciated!

2

First of all, welcome!

You will have a lot more luck around here if you post an example in the Playground.

You might want to look at this:

Specifically this area does something like that.

Like I said, if you can get as much working as you can and then link to the playground, it makes answering the specific issue easier.

Good luck

3

Also see

4

Thank you! Picking Ray was EXACTLY what I was looking for!