I have a scene with some shapes, each of them has own measurements for its size and distance to other shapes. Label measurements are Object3D instances. I create canvas, draw measurement text there and apply this texture to those Object3Ds.
Now I want to show inputs instead of just labels for distances.
Here’s how it looks (dotted lines are distances)
And here’s how I want it looks like:
I’ve managed to show inputs on correct place after clicking on label using raycaster, but it uses vector3 as a pointer with coords in range [-1; 1] so they can be correctly converted to pointer on screen as vector2.
I’ve used this code and some other variations, but it actually gives me vector3-coords not in range [-1; 1], so my inputs are wrong placed:
const vector = new THREE.Vector3(); this.plane.getWorldPosition(vector); vector.project(camera); vector.x = (vector.x * widthHalf) + widthHalf; vector.y = - (vector.y * heightHalf) + heightHalf;
Any ideas how to get correct coords in 2d to place inputs on them?
UPD. One more notice. I need to update position after zoom in or zoom out