破解旋转死锁:Threejs 四元数魔法对抗欧拉角困局

欧拉角

欧拉角是一种表示三维空间中旋转的方法,它由三个角度组成,通过设定物体绕 指定顺序 的轴进行旋转,可以直接对物体的 .rotation 属性进行操作。

rotation 属性是一个欧拉角对象,表示物体的旋转角度。欧拉角由三个角度组成,分别是绕 x 轴的旋转角度、绕 y 轴的旋转角度和绕 z 轴的旋转角度。

js 复制代码
// 创建一个立方体
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(cube);

let euler = new THREE.Euler(Math.PI / 2, 0, 0);
cube.rotation.copy(euler);

console.log(cube.rotation);

Euler(x, y, z, order): 创建一个欧拉角对象,其中 x、y、z 分别表示绕 x 轴、y 轴和 z 轴的旋转角度,order 表示旋转顺序。

换算: 欧拉角不能直接使用度数,需要把度数转换为弧度值,弧度 = (Math.PI / 180) * 度数

简洁写法: cube.rotation.set(x, y, z)

注意: 欧拉角不能直接赋值,需要使用 .copy() 方法进行赋值。

js 复制代码
// 创建一个立方体
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(cube);

let angle = 0;
function animate() {
  angle += 1;
  cube.rotation.x = (angle * Math.PI) / 180;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

可以使用 THREE.Euler().set() 来统一操作 .rotation,也可以通过 .x.y.z 来分别操作。

方法

  • rotateX(angle): 绕 x 轴旋转 angle 弧度。

  • rotateY(angle): 绕 y 轴旋转 angle 弧度。

  • rotateZ(angle): 绕 z 轴旋转 angle 弧度。

区别: rotateX()rotateY()rotateZ() 多次使用,会叠加旋转角度,而 set() 每次使用,都会覆盖旋转角度。

四元数

四元数是一种表示三维空间中旋转的方法,它由四个部分组成,分别是 w、x、y、z。其中 w 是实部,x、y、z 是虚部。

为什么使用四元数: 欧拉角在旋转过程中会出现万向节死锁问题,而四元数不会。

万向节死锁

原理: 当其中两个旋转轴重合时,就会发生万向节死锁。这会致使失去一个自由度,进而难以预测和控制物体的旋转。在欧拉角的表示里,通常是当绕其中一个轴旋转 ±90 度时,另外两个轴会重合,从而出现万向节死锁。

例如: 假设一个物体绕 Y 轴旋转 90 度,此时 X 轴和 Z 轴就会重合。这时候,不管是绕 X 轴旋转还是绕 Z 轴旋转,产生的效果是一样的,这就意味着失去了一个自由度,这种现象就是万向节死锁。

js 复制代码
//万向节死锁示例
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(cube);

//y轴旋转90度
cube.rotation.y = Math.PI / 2;

let angle = 0;
function animate() {
  angle += 1;
  cube.rotation.x = (angle * Math.PI) / 180;
  cube.rotation.z = (angle * Math.PI) / 180;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

quaternion

在四元数中是通过操作quaternion来实现的,其中quaternion是一个四元数对象,表示物体的旋转。

quaternion 属性是一个四元数对象,表示物体的旋转。四元数由四个部分组成,分别是 w、x、y、z。其中 w 是实部,x、y、z 是虚部。

1. 创建四元数

js 复制代码
const quaternion = new THREE.Quaternion(x, y, z, w);

其中 x、y、z、w 分别是四元数的分量。如果不传入参数,则默认为 (0, 0, 0, 1)。

2. 四元数计算公式

q = (x, y, z, w) = (sin(θ/2) * ux , sin(θ/2) * uy , sin(θ/2) * uz, cos(θ/2))

js 复制代码
const angle = (30 * Math.PI) / 180; // 将角度转换为弧度
const halfAngle = angle / 2;
const sinHalfAngle = Math.sin(halfAngle);
const cosHalfAngle = Math.cos(halfAngle);
const quaternion = new THREE.Quaternion(
  sinHalfAngle * 1, //解释
  sinHalfAngle * 0,
  sinHalfAngle * 0,
  cosHalfAngle
);

绕着哪个轴旋转,哪个轴的分量就为 1,其他轴的分量就为 0。

3. 设置四元数

js 复制代码
cube.quaternion.copy(quaternion);

简洁写法: setFromAxisAngle(axis, angle) 从轴和角度创建四元数。

1. axis: 表示旋转轴的向量,例如 new THREE.Vector3(1, 0, 0) 表示绕 x 轴旋转。

2. angle: 表示旋转角度,单位是弧度。

js 复制代码
const quaternion = new THREE.Quaternion();
const axis = new THREE.Vector3(1, 0, 0); // 绕 x 轴旋转
const angle = (Math.PI / 180) * 90; // 旋转 90 度
quaternion.setFromAxisAngle(axis, angle);

方法

  • setFromEuler(euler): 从欧拉角创建四元数。

  • multiply(quaternion): 将当前四元数与另一个四元数相乘,会改变当前四元数。

  • multiplyQuaternions(a, b): 将两个四元数相乘,返回一个新的四元数。

解决死锁

js 复制代码
// 解决万向节死锁示例
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(cube);

//y轴旋转90度
cube.quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 2);

function animate() {
  // 创建一个四元数qx
  const qx = new THREE.Quaternion();
  // 将qx设置为绕x轴旋转0.01弧度的四元数
  qx.setFromAxisAngle(new THREE.Vector3(1, 0, 0), 0.01);
  // 将cube的旋转四元数与qx相乘
  cube.quaternion.multiplyQuaternions(qx, cube.quaternion);
  // 创建一个四元数qz
  const qz = new THREE.Quaternion();
  // 将qz设置为绕z轴旋转0.01弧度的四元数
  qz.setFromAxisAngle(new THREE.Vector3(0, 0, 1), 0.01);
  // 将cube的旋转四元数与qz相乘
  cube.quaternion.multiplyQuaternions(qz, cube.quaternion);
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

书洞笔记

相关推荐
wkj0012 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
GoldKey7 小时前
gcc 源码阅读---语法树
linux·前端·windows
Xf3n1an8 小时前
html语法
前端·html
张拭心8 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
烛阴8 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python
@大迁世界8 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
红尘散仙9 小时前
Rust 终端 UI 开发新玩法:用 Ratatui Kit 轻松打造高颜值 CLI
前端·后端·rust
新酱爱学习9 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
袁煦丞9 小时前
把纸堆变数据流!Paperless-ngx让文件管理像打游戏一样爽:cpolar内网穿透实验室第539个成功挑战
前端·程序员·远程工作
慧慧吖@10 小时前
关于两种网络攻击方式XSS和CSRF
前端·xss·csrf