How Can I add an element textbox on the canvas in special coordinates

[Ammar_Kayali]

Hi All,

I want to add a textbox to alter the length of the line in the center of the line.
How can I know the right coordinates of this textbox?

    const material = new THREE.LineBasicMaterial({ color: 0x000000 });
            const points = [];
           
            points.push(
              new THREE.Vector3(line1X, y, line1Z)
            );
            points.push(
              new THREE.Vector3(line2X, y, line2Z)
            );                                                                                                                                                                                                                                                                                                                                                                                                                             
            const geometryTop = new THREE.BufferGeometry().setFromPoints(points);
           
           let lineRight = new THREE.Line(geometryTop, material);
           lineRight.userData.type = "measures-line";
           scene.add(lineRight);

[Mugen87]

Since it seems you want to convert coordinates from world space into 2D screen space, you can used the approach that was outlined in the following topic:

How to converting world coordinates to 2D mouse coordinates in ThreeJS

vector.project( camera ); This only converts a vector to normalized device space. You still have to map the vector to 2D screen space. Something like: vector.x = ( vector.x + 1) * width / 2; vector.y = - ( vector.y - 1) * height / 2; vector.z = 0; width and height represent the dimensions of the canvas (renderer.domElement).

[Ammar_Kayali]

Thank you @Mugen87