框旋转平行于选定的面

Question

在球体脸部上，单击添加与脸部平行的方框。 为了获得（x，y，z）旋转角度，我使用这种方法：

function getRotation(faceNormal){
    var planeVector1 = new THREE.Vector3(0,1,0);
    var matrix1 = new THREE.Matrix4();
    var quaternion = new THREE.Quaternion().setFromUnitVectors(planeVector1, faceNormal);
    var matrix = new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
    var a = new THREE.Euler( );
    a.setFromRotationMatrix ( matrix, 'XYZ' )
    return a.toVector3();
}   

结果如下所示，框与面部平行但具有不同的方向：

我希望盒子具有相同的方向并与脸部平行，如下图所示，我该如何实现：

创建小提琴示例，只需点击球体即可添加框：jsfiddle

Answer 1

Object3D.lookAt()是一种方便的方法，可以满足您的目的。

首先创建网格的几何体，使其在正z轴方向默认“查找”。然后拨打mesh.lookAt()。例如：

square.lookAt( intersects[ 0 ].face.normal );
square.position.copy(intersects[ 0 ].point );

请注意，在这种情况下，我们先调用lookAt()，然后再翻译对象。

小提琴：https://jsfiddle.net/c12vdwbx/8/

three.js r.73