【问题标题】：How to Detect collision of Cube Mesh with browser boundary in ThreeJS如何在 ThreeJS 中检测 Cube Mesh 与浏览器边界的碰撞
【发布时间】：2013-08-17 04:12:20
【问题描述】：
我是 3D 游戏和 ThreeJS 的新手。如上图所示。我的网格在浏览器的左边界，当时网格位置是 -1035 而不是 0。
这意味着 ThreeJS 中的 mesh.position.x 不是浏览器窗口 X 像素，那么 ThreeJS 中的 mesh.position.x 是什么。是否有任何计算可以将浏览器内部宽度和高度转换为与 mesh.position.x 相同的值。如何检测与浏览器边界的碰撞。
【问题讨论】：
标签：
javascript
html
three.js
webgl
【解决方案1】：
Three.js 使用 3D 空间坐标系，其中 X 和 Z 轴是水平的，Y 轴是垂直的。原点 (0, 0, 0) 只是该空间中的任意点，您可以在 3D 世界中“环顾四周”，因此原点可能不在屏幕上。 Three.js 空间中对象的坐标，无论出于何种意图和目的，也是任意单位。
您可以使用projectors 在 2D 屏幕空间和 3D 世界空间之间进行转换。从 3D 到 2D 已经是answered了，还有一个不错的tutorial这个话题。
因此，要确定网格是否在屏幕上，您应该将其 3D 位置投影到 2D 屏幕空间，然后检查是否超出窗口或画布的大小。