# Two Object connection line

**URL:** <https://discourse.threejs.org/t/two-object-connection-line/17867>\
**Category:** Questions\
**Tags:** transform\
**Created:** [August 13, 2020, 3:44am UTC](https://discourse.threejs.org/t/two-object-connection-line/17867 "2020-08-13T03:44:52Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![yanwencheng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yanwencheng/32/10559_2.png) [@yanwencheng](https://discourse.threejs.org/u/yanwencheng)\
**Post date:** [August 13, 2020, 3:44am UTC](https://discourse.threejs.org/t/two-object-connection-line/17867/1 "2020-08-13T03:44:52Z")

</div>

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 demo ![1597286643454_20200813114439](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d8e198dd288fb6b8ad08aeb49b008fdca5e52060.gif)

this is my code

[code.zip](https://discourse.threejs.org/uploads/short-url/bcId0ZHdUQVSK75k1XFnim7hJWW.zip) (1.1 MB)

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [August 13, 2020, 6:08am UTC](https://discourse.threejs.org/t/two-object-connection-line/17867/2 "2020-08-13T06:08:28Z")

</div>

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.
```

---

<div class="post-metadata">

**Author:** ![yanwencheng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yanwencheng/32/10559_2.png) [@yanwencheng](https://discourse.threejs.org/u/yanwencheng)\
**Post date:** [August 13, 2020, 6:39am UTC](https://discourse.threejs.org/t/two-object-connection-line/17867/3 "2020-08-13T06:39:06Z")

</div>

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

 ![QQ截图20200812140916](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/63d84cca159cc1afbe31a70a59ee9a2507ef0477.jpeg)

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

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [August 13, 2020, 6:49am UTC](https://discourse.threejs.org/t/two-object-connection-line/17867/4 "2020-08-13T06:49:05Z")

</div>

> [@yanwencheng](#):
>
> message box is a planeBufferGeometry

Oh. I misunderstood your problem sorry.  
If your message board is a [Mesh](https://threejs.org/docs/#api/en/objects/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.

---

<div class="post-metadata">

**Author:** ![yanwencheng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yanwencheng/32/10559_2.png) [@yanwencheng](https://discourse.threejs.org/u/yanwencheng)\
**Post date:** [August 13, 2020, 7:06am UTC](https://discourse.threejs.org/t/two-object-connection-line/17867/5 "2020-08-13T07:06:06Z")

</div>

when mesh is lookat camera the position has problem

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [August 13, 2020, 7:11am UTC](https://discourse.threejs.org/t/two-object-connection-line/17867/6 "2020-08-13T07:11:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yanwencheng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yanwencheng/32/10559_2.png) [@yanwencheng](https://discourse.threejs.org/u/yanwencheng)\
**Post date:** [August 13, 2020, 7:50am UTC](https://discourse.threejs.org/t/two-object-connection-line/17867/7 "2020-08-13T07:50:21Z")

</div>

this demo code [https://codepen.io/yanwencheng/pen/xxVZqEM](https://codepen.io/yanwencheng/pen/xxVZqEM)

---

<div class="post-metadata">

**Author:** ![yanwencheng](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yanwencheng/32/10559_2.png) [@yanwencheng](https://discourse.threejs.org/u/yanwencheng)\
**Post date:** [August 13, 2020, 9:18am UTC](https://discourse.threejs.org/t/two-object-connection-line/17867/8 "2020-08-13T09:18:40Z")

</div>

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