Interaction with model in Canvas2D

[aaronmck]

Hi all,

So I'm working on a project where I need to be able to click on a mesh and have information about that mesh appear on the screen.

I was told I should use Canvas2D but I'm still pretty new with this and it is simply going above my head, I haven't a clue where to start with this. 

Could anyone be kind enough to help me with this?

I have attached a playground with what I'm looking to do.

Basically I will have multiple meshes on screen and when I click / double click on one of the meshes it will display info for that particular mesh. 

http://babylonjs-playground.com/#BPV7F

Thanks in advance!

[Sebavan]

Hello,

You first need to attach the control to the canvas (html one not the 2d feature), but this was probably throwing due to name conflict (the canvas2d was also named canvas in your scene).

Once done the controls are working, then you can use the action manager to reference an action when the mesh is clicked.

This action happens on pick and set the property "text" of the text2d element to the chosen text... (agree it is a lot of texts and canvases...) You can check the code here:

http://babylonjs-playground.com/#BPV7F#9

The easiest would be to read the doc for the action manager and the other pg samples:

https://doc.babylonjs.com/tutorials/How_to_use_Actions

 

[aaronmck]

Hey @Sebavan

This is great, very helpful.

Just one issue. I have some of my models load on a button click and others that do not. 

The canvas 2d panel works on the models that don't load on button click but doesn't work on the models that do load on button click.

Do you know why this is?

Thanks!

[Sebavan]

I would bet on the function not being attached correctly, could you share a PG with a repro please ?

[aaronmck]

@Sebavan Here you go, a basic example of my code i'm using

http://babylonjs-playground.com/#JFMP

For some reason it isn't working on either of the models in that PG

[Sebavan]

Hello,

Here is a fix: http://babylonjs-playground.com/#JFMP#16

You need to make your meshes pickable (all the loaded one) and also your button did not work, so I put the click to load the second element on the fps label.

I did not fix the rest of your code :-) only the BJS part (not that much time today).

CU,

 

[aaronmck]

Hey,

This is perfect, I got it working in my code so thanks very much, greatly appreciated!