Two Object connection line

Questions
1

I made a connection line between two objects, the message object lookat（ camera.position ）There is a problem. How to calculate the coordinates of the point pointing to the message object? Is there a related demo1597286643454_20200813114439

this is my code

code.zip (1.1 MB)

2

There is an infinity of possible position in 3D space for the 2D position of your message box.

You should do this the other way around : find the screen space position of the line’s tip, and position the message box on it.

const width = window.innerWidth;
const height = window.innerHeight;
const widthHalf = width / 2;
const heightHalf = height / 2;

const pos = endOfLinePosition.clone() // endOfLinePosition is the Vector3 at the end of the blue line.
pos.project(camera);
pos.x = ( pos.x * widthHalf ) + widthHalf;
pos.y = - ( pos.y * heightHalf ) + heightHalf;

// Now pos is the target position for the message box. If it's a dom element, update its style with JS.
3

hi ,message box is a planeBufferGeometry,so did the icon

QQ截图20200812140916
QQ截图202008121409161295×557 95.6 KB

i want to connection the board and the icon planeBufferGeometry,
controller is OrbitControls

4

Oh. I misunderstood your problem sorry.
If your message board is a Mesh, its position vector is accessible at mesh.position.
When you construct the line geometry, use this vector to positon the end of the line on the message board.

5

when mesh is lookat camera the position has problem

6

mesh.lookAt should update mesh.rotation but not mesh.position

7

this demo code https://codepen.io/yanwencheng/pen/xxVZqEM

8

I’m sorry I didn’t understand what you mean
this demo code https://codepen.io/yanwencheng/pen/xxVZqEM