javascript - Three.js 寻找屏幕边缘二维投影的位置

Question

我正在使用此答案的代码来查找 Three.js 中 3D 对象的屏幕位置:

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

我正在从场景中 3d 对象的位置到屏幕上的 2d 点绘制一条 2d 线。有时 3D 对象位于视口(viewport)之外。在这种情况下，我想从屏幕上的 2d 点到看不见的物体的边缘画一条线，但我希望它在正确的 Angular 和正确的位置上是准确的。

有人有什么建议吗？

Answer 1

您可以使用 THREE.Line() 对象 Material 的 THREE.Raycaster() 和 .depthTest = false 属性来做那个“把戏”。

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

它为我们提供了一个距离相机不远(1 个单位)的点，您可以从该点将线的起点设置为对象。

还有

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

该线始终可见，并且不能被其他对象隐藏。

jsfiddle例子。您可以使用缩放和旋转来使链接到红点的对象移出视口(viewport)，并且红色链接线将处于直 Angular 。