javascript - ThreeJS で Cube Mesh とブラウザー境界の衝突を検出する方法

Question

私は 3D ゲームと ThreeJS の初心者です。上の画像に示すように。ブラウザの左境界にあるメッシュと、その時点でのメッシュ位置は 0 ではなく -1035 です。これは、ThreeJS の mesh.position.x がブラウザ ウィンドウの X ピクセルではなく、ThreeJS の mesh.position.x であることを意味します。ブラウザの内側の幅と高さを mesh.position.x と同じに変換する計算はありますか。ブラウザ境界との衝突を検出する方法。

Answer 1

Three.js は、X 軸と Z 軸が水平で Y 軸が垂直である 3D 空間座標系を使用します。原点 (0, 0, 0) は、その空間内の任意の点にすぎず、3D の世界で「見回す」ことができるため、原点が画面上にない場合があります。Three.js 空間内のオブジェクトの座標も、すべての意図と目的において、任意の単位です。

プロジェクターを使用して、2D スクリーン空間と 3D ワールド空間の間で変換できます。3D から 2D への移行については既に回答があり、このトピックに関するすばらしいチュートリアルもあります。

したがって、メッシュが画面上にあるかどうかを調べるには、その 3D 位置を 2D 画面空間に投影し、それがウィンドウまたはキャンバスのサイズの外側にあるかどうかを確認する必要があります。