Three.js 保持模型相对曲面表面姿态 从一个向量旋转到另一个向量

Question

一个移动的模型出现在其它模型表面的不同位置，希望相对模型表面切面或者说法线方向保持一个特定的姿态。

应用场景：

• 移动几何平面始终垂直其它模型表面法线方向——鼠标在三维场景中移动，一个几何平面跟着鼠标移动，鼠标移动的过程中会指向一个模型表面的位置，希望控制移动的几何平面始终平行于当前位置曲面的切面，或者说移动的几何平面始终垂直曲面的法线方向。
• 比如三维场景中，一个人在地面上走动，希望人的姿态始终垂直于路面

基本思路就是先获得移动模型所在位置模型表面的法线方向的向量值，然后创建一个三维向量 Vector3 来表示移动模型的姿态，然后通过四元数对象 Quaternion 的 .setFromUnitVectors() 方法计算两个向量之间是如何旋转的，把计算结果赋值给移动模型的四元数属性 .quaternion。

模型对象的四元数属性 .quaternion 和模型对象的角度属性 .rotation 表示的都是模型的角度信息，都会转化为模型对象变换矩阵的旋转矩阵。

//返回射线选中的对象
var intersects = raycaster.intersectObjects([boxMesh, ...]);
if (intersects.length > 0) {
  moveMesh.position.copy(intersects[0].point)
  var normal = intersects[0].face.normal; // 射线选中模型表面当前位置法线
  moveMesh.translateOnAxis(normal, 1);// 稍微沿着法线方向平移，避免平面重合
  var quaternion = new THREE.Quaternion(); //四元数对象
  // 创建一个向量表示模型的姿态，不同的模型对象，可以值有所不同，下面是一个矩形平面几何体的例子PlaneGeometry
  var v3 = new THREE.Vector3(0, 0, 1); //平面默认法线状态
  // setFromUnitVectors方法计算两个向量之间需要如何旋转，渲染信息保存在四元数对象中
  quaternion.setFromUnitVectors(v3, normal);//计算旋转角度四元数
  // 移动的模型对象执行四元数所表达的旋转信息
  moveMesh.quaternion.copy(quaternion);
}