javascript - 如何在 ThreeJS 中检测 Cube Mesh 与浏览器边界的碰撞

Question

我是 3D 游戏和 ThreeJS 的新手。如上图所示。我的网格在浏览器的左边界，当时网格位置是 -1035 而不是 0。这意味着 ThreeJS 中的 mesh.position.x 不是浏览器窗口 X 像素，那么 ThreeJS 中的 mesh.position.x 是什么。是否有任何计算可以将浏览器内部宽度和高度转换为与 mesh.position.x 相同的值。如何检测与浏览器边界的碰撞。

Answer 1

Three.js 使用 3D 空间坐标系，其中 X 和 Z 轴是水平的，Y 轴是垂直的。原点 (0, 0, 0) 只是该空间中的任意点，您可以在 3D 世界中“环顾四周”，因此原点可能不在屏幕上。Three.js 空间中对象的坐标，出于所有意图和目的，也是任意单位。

您可以使用投影仪在 2D 屏幕空间和 3D 世界空间之间进行转换。从 3D 到 2D 已经得到解答，并且还有一个关于该主题的不错的教程。

因此，要确定网格是否在屏幕上，您应该将其 3D 位置投影到 2D 屏幕空间，然后检查它是否超出窗口或画布的大小。