threejs让物体绕指定轴旋转指定角度

原创
2018/02/07 11:39
阅读数 1.2W

第一点 物体的rotation的旋转属性是相对与该物体的本身坐标系而言的,物体的rotation就是Euler欧拉角,但是会存在万向节死锁的问题。

第二点 three.js中提供了相关的方法rotateOnAxis(axis,angle),该方法需要注意的是angle是相对于物体之前状态的旋转角度,也就是增加角度;另外一点需要注意的是axis参数向量是相对物体本身坐标系的,且为单位向量,通过调用.normalize()得到单位向量;rotateOnAxis方法其实也就是调用Quaternion对象的setFromAxisAngle方法

第三点 构建旋转矩阵

  1. makeRotationAxis(axis,angle)方法生成绕任意轴转angle弧度的旋转矩阵,makeRotationAxis构建的旋转矩阵是相对旋转轴坐标系原点,所以需要以下步骤求得物体坐标在旋转轴坐标系中的位置
  2. new THREE.Matrix4().setPosition(point);构建位置变换矩阵,此处point为旋转轴坐标系原点在世界坐标系中的位置,可通过创建plane和射线求得,
  3. 先进行位置变换,后进行物体旋转变换(quaternion应用setFromRotationMatrix)
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部