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

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

发布于 2021-09-26 字数 1739 浏览 1031 评论 0

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

应用场景:

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

基本思路就是先获得移动模型所在位置模型表面的法线方向的向量值,然后创建一个三维向量 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);
}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

38 文章
6 评论
23735 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0