I am working on an app which allows the user to drag-and-drop a 2D text widget on top of an object.
This text widget needs to be customisable, so you can change It’s color, font, scale, rotation.
You will have a thumbnail button in the corners of the widget that work as hotspots to start the event (for example: rotation thumbnail to start rotating the text once you click that thumbnail).
I already know how to add all these functionalities and I also know how to make the text follow along with the 3D object.
What I am struggling now is how to link the functionality to the hotspots of the text widgets and let the code find and use the coördinates of the 3D model to know when a user clicks which hotspots and how to translate it in the 3D space.
I’m not sure I understand what you are looking for. Can you demonstrate your current progress with a simple live example? Otherwise you have to explain more clearly your problem.
I’m sorry if it wasn’t very clear, please refer to the following video to see what I am looking for: https://youtu.be/4LSYTg_KvtM
It is an example of what I want to achieve, on a 3D model.
Handling editable text is a very deep topic. Instead of building your own editable text control, try have a text control in a sidebar using the DOM (regular form inputs). Whenever an input changes then you re-render the non-editable text on the model. You can draw flat text on the model using a canvas as a texture.
Thanks a lot prisoner, exactly what I was looking for!
Do you know a way to make the customisation happen on the 3D model itself?
So I would like to skip having to use the side canvas but make text turn, scale, rotate,… when you click the hotspots on the 3D model itself.
).