Place input on Object3D

Questions
, , , ,
1

Hey everybody.
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)

image
image809×746 43.5 KB

And here’s how I want it looks like:

image
image1085×576 10.4 KB

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