1

I'm using the code of this answer to find the screen position of 3d objects in three.js:

Converting 3D position to 2d screen position [r69!]

I'm drawing a 2d line from the position of 3d object in the scene to a 2d point on the screen. some times the 3d object is outside the viewport. in that case i would like to draw a line from the 2d point on the screen to the edge towards the un-seen object, but i want it to be accurate in the right angle and to the right position.

anybody has any suggestions?

Community
  • 1
  • 1
Normal
  • 528
  • 4
  • 19

1 Answers1

2

You can use THREE.Raycaster() and .depthTest = false property of a material of a THREE.Line() object to do that "trick".

raycaster.setFromCamera(mouse, camera);
raycaster.ray.at(1, dummyObject.position);

it gives us a point not far (1 unit) from camera from which you can set the beginning of the line to your object.

And

var line = new THREE.Line(lineGeom, new THREE.LineBasicMaterial({ color: color }));
line.material.depthTest = false;

The line will be always visible and can't be hidden by the other objects.

jsfiddle example. You can use zoom and rotation to make the object, linked to the red dot, pass out of the viewport and the red linking line will be at the right angle.

prisoner849
  • 16,894
  • 4
  • 34
  • 68
  • 1
    You're welcome. To be honest, I didn't know about `.ray.at()` too, until I started to dig into it because of your question ) – prisoner849 Jan 19 '17 at 09:57