Best approach to add CSS2DRenderer objects to speckle viewer

Hi! im trying to implement a 2D card in the viewer to display informatión about selected objects.

So far im able to add the 2D card to the viewer but i need to update/render the object in order to update the position when the user interacts with the viewer, right now its static

basically something like this example in terms of labes but for speckle
https://threejs.org/examples/#css2d_label

any refernece or ideas are welcome
regards
Ricardo.

1 Like

Hi @Ricardo_Zepeda

There is a builtin mechanism in the viewer’s API that allows you to position the card depending on the user’s interaction. First there is the SelectionEvent which provides you with a point the 3D space where the selection took place. Then there is the query mechanism, more specifically the PointQuery which can take a point in 3D space and return it’s screen projection. Please note that the returned screen projection is in NDC and you will need to use NDCToScreen from the viewer’s Utils to get the result in pixels.

All this, plus additional information is provided in the documentation. Let me know if you need more help

Cheers

1 Like

Thanks a lot! will check the resource to make it work!

regards
Ricardo.

1 Like