如何在ThreeJS中检测多维数据集网格与浏览器边界的碰撞

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-space中对象的坐标也是任意单位。

您可以使用projectors在2D屏幕空间和3D世界空间之间进行转换。从3D到2D已经answered，并且在该主题上也有一个很好的tutorial。

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