Two Object connection line

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)

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.

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

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

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.

when mesh is lookat camera the position has problem

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

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

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