In my current project, I am utilizing React THREEJS along with various libraries like DREI and Meshline to create lines and text elements. I am currently working on drawing a line and need to display the length label next to it. Here is an example of what I am aiming for:
https://i.sstatic.net/mEQ6F.png
Now, I am looking to implement a feature that allows me to adjust the position of the label based on the orientation of the line. For instance:
- A vertical line should have movement options along the X-axis (Left/Right)
- A horizontal line should have movement options along the Y-axis (Top/Bottom)
I have already calculated the middle position of the vector points P1 and P2:
const P1 = new THREE.Vector3(-300.79, -296.96, 0);
const P2 = new THREE.Vector3(101.49, -8.43, 0);
const disX = (P2.x + P1.x) / 2;
const disY = (P2.y + P1.Y) / 2;
const P3 = new THREE.Vector3(disX, disY, 0);
Any suggestions on how I can achieve this task effectively would be greatly appreciated!