How do I create the rotating effect similar to Labels?

[iklimis]

Hi Forma Team!, 

I was trying out the new Label feature and noticed that the label rotates depending the direction the user is looking at it. This is an excellent feature that enhances the overall usability and wondered myself how to achieve this effect quite a few times.

Could you share some tips on how to achieve this effect or is there any chance you could expose such setting in the elements properties maybe.

Thank a lot for your help and insights
Giannis


 
 

[kasper.herlov]

Hi Giannis, glad you like it. In terms of how to achieve the effect, do you mean it terms of how we built it or? 
Happy to help, just not sure how to help exactly 🙂 

[iklimis]

Hey @kasper.herlov,

Mainly how would I achieve this effect on our side. Meaning using the existing Forma Sdk and tools in our disposal if it is possible to create this effect?

And if it is not would you think of exposing this effect as an setting of a rendered 3D object?
For example: if I render in the canvas a Glb would a setting called "autoRotate" be possible?

Regards
Giannis

[kristoffer.tronerud · Accepted solution]

Hello Giannis 👋

Thank you for the great feedback!  Unfortunately I don't think this particular technique can be applied to a generic 3d object/GLB as the Labels are rendered using HTML/CSS and repositioned continuously. The code that renders labels is contained within our webapp at the moment, and we feel that it's not mature enough to be exposed. 

However, it's really interesting feedback to get, it's very much appreciated. I can see how your suggestions could be useful!

---

In short this is how Labels technically are implemented:

• 'Labels' are rendered in 2D with HTML/CSS, and not as an object in the 3d scene. That’s why they will always feel like they “face the camera”
• They have attached a [x, y, z] position (transform) to where it was placed.
• When moving the camera around, the position of the label are updated continuously, by translating the 3d position to 2d coordinates.
• Then CSS is applied to move the HTML element with translate3d