大家好,我是yangyang.最近工作中在接触基于threejs实现的vr全景阅读器photo-sphere-viewer插件来做vr装修编辑器,使用过程中遇到关于视角调整的问题,并开始对欧拉角的概念有了一些认识.

关于欧拉角Picth、Yaw、Rol

Pitch、Yaw 和 Roll 是飞行动力学和三维空间中常用的术语，通常用来描述飞行器或物体的姿态。它们是关于三个坐标轴的旋转：

Pitch (俯仰)：绕横轴旋转。当一个物体绕其横轴旋转时，就发生了俯仰。在航空航天领域，这通常是描述飞行器绕其纵轴旋转的动作。
Yaw (偏航)：绕垂直轴旋转。偏航是绕垂直轴旋转，通常用于描述飞行器绕垂直轴的摆动。
Roll (滚转)：绕纵轴旋转。滚转是绕物体的纵轴旋转，导致物体的一个侧面向上或向下旋转。

这三个旋转角度通常以欧拉角（Euler Angles）的形式来表示。欧拉角是描述三维空间中旋转的一种方式，由三个角度构成。在飞行器姿态表示中，通常按照特定的顺序应用这三个角度。常见的顺序包括 ZYX、XYZ、YXZ 等。例如，ZYX 表示先滚动（Roll）、再俯仰（Pitch）、最后偏航（Yaw）。

这些角度的理解对于控制飞行器、模拟三维动画或进行计算机视觉中的姿态估计等领域都很重要。在不同的上下文中，这些角度可能被表示为弧度或度数，具体取决于使用的标准。

threejs中的欧拉角

Three.js 使用欧拉角（Euler Angles）来表示旋转。你可以为对象设置 rotation 属性，该属性是一个 THREE.Euler 对象。这个对象包含 x、y 和 z 属性，分别对应 pitch、yaw 和 roll。这些值可以以弧度或角度的形式表示，具体取决于你的选择。

以下是一个简单的例子，演示了如何在 Three.js 中设置对象的旋转：

// 引入Three.js库
import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 设置欧拉角（pitch、yaw、roll）
cube.rotation.x = Math.PI / 4;  // 45度的俯仰
cube.rotation.y = Math.PI / 4;  // 45度的偏航
cube.rotation.z = Math.PI / 4;  // 45度的滚转

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染场景
function animate() {
  requestAnimationFrame(animate);

  // 旋转动画
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

在这个例子中，我们通过设置 cube.rotation.x、cube.rotation.y 和 cube.rotation.z 来控制立方体的旋转

加深理解

1.1 俯仰角Pitch

俯仰角 Pitch 是指绕绿色 Y 轴（也就是方向朝右的那个轴）旋转的角。如下面所示，图1是三个欧拉角都为0时的原始图，图2是把俯仰角 Pitch 设为30度后的对比图。从图中可以看出，人物确实绕着 Y 轴旋转了。俯仰角旋转的效果，可以想象成使人前倾或后仰。

1.2 偏航角Yaw

偏航角 Yaw 是指绕蓝色 Z 轴（也就是方向朝上的那个轴）旋转的角。图3是把偏航角 Yaw 设为30度后的效果图。对比图1可以发现，偏航角 Yaw 使人物绕着 Z 轴旋转。偏航角旋转的效果，可以想象成人在原地转动。

1.3 滚动角Roll

滚动角 Roll 是指绕红色X 轴（也就是方向朝前的那个轴）旋转的角。图4是把滚动角 Roll 设为30度后的效果图。对比图1可以发现，滚动角 Roll 使人物绕着 X 轴旋转。滚动角旋转的效果，可以想象成把人放在转盘上转动。

参考链接:https://zhuanlan.zhihu.com/p/545518010

口诀:点头pitch摇头yaw剩下那个就是roll

四时宝库

程序员的知识宝库

ThreeJS-欧拉角Picth、Yaw、Rol（三维欧拉角）