如何在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空间中的对象的坐标也是任意单位.

您可以使用投影仪在2D屏幕空间和3D世界空间之间进行转换.从3D到2D已经得到了解答,并且还有关于该主题的精彩教程.

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