顔の回転を取得するThree.js - javascript、three.js

このようにThree.jsとマウスクリックの交差部分

me.vector.set(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1,
0.5);
me.vector.unproject(app.camera);
me.ray.set(app.camera.position, me.vector.sub(app.camera.position).normalize());
var intersects = me.ray.intersectObjects(app.colliders, false);

それで、私は以下の特性で、完全に交差しました：

distance, face, faceIndex, object, pointそれから関数を実行します。

問題は次のとおりです。

床のような立方体の面をクリックしたときに検出したいのですが、次の例では灰色の面になります。

私のengilsh Dについてはすみません。

回答：

WebGLは座標と色で頂点と面を定義します。 法線。面法線は正規化ベクトルです。フェースプレーンに対して垂直です（そして一般的にメッシュの「外側」を指します）それは向きを定義し、例えば雷の計算を可能にします。 three.jsでは、次のようにしてアクセスできます。 face.normal.

• あなたの床のような面が厳密に水平であれば、それらの法線はすべて正確 {x:0,y:1,z:0}。法線は正規化されているので、単純に face.normal.y === 1 また、xとyが0であることを確認します。

• 顔が厳密に水平ではない場合は、y軸との制限角度を設定する必要があります。あなたはこの角度を計算することができます var angle=Math.acos(Yaxis.dot(faceNormal)) どこで Yaxis=new THREE.Vector3(0,1,0).