threejs 欧拉角

在 Three.js 中，欧拉角（Euler）是一种用来表示三维空间中物体旋转的方式。每个 3D 物体（例如 THREE.Mesh）都有一个 rotation 属性，它本身就是一个 THREE.Euler 类的实例。 

Three.js 欧拉角基础

1. THREE.Euler 类: 这是 Three.js 中用于表示欧拉角的类。它包含四个核心属性:

   • x: 绕 X 轴旋转的角度（以弧度为单位）。
   • y: 绕 Y 轴旋转的角度（以弧度为单位）。
   • z: 绕 Z 轴旋转的角度（以弧度为单位）。
   • order: 一个字符串，表示旋转应用的顺序（例如 'XYZ'、'YXZ' 等）。

2. 设置旋转:

   • 直接修改: 你可以直接通过 object.rotation.x = ...、object.rotation.y = ... 等方式来修改欧拉角，从而改变物体的姿态。
   • 使用 set 方法: 你也可以使用 .set(x, y, z, order) 方法来一次性设置所有参数。
   • 弧度制: 需要注意的是，Three.js 中所有角度都使用弧度来表示，而不是度数。你可以使用 THREE.MathUtils.degToRad() 来进行转换。 

旋转顺序（order）

欧拉角一个重要的特性是旋转的顺序会影响最终结果，这与“万向锁”问题有关。Three.js 默认的旋转顺序是 'XYZ'，但你可以在创建 THREE.Euler 对象或使用 .set() 方法时指定其他顺序。 

例如，以下代码演示了不同的旋转顺序：

javascript

// 默认顺序 'XYZ'
const euler = new THREE.Euler(0.5, 0.5, 0);

// 指定顺序 'YXZ'
const eulerYXZ = new THREE.Euler(0.5, 0.5, 0, 'YXZ');

欧拉角与四元数

虽然欧拉角直观且易于理解，但它存在“万向锁”问题，即当某个轴的旋转导致另外两个轴重合时，会损失一个自由度。在大多数 Three.js 内部的旋转计算中，为了避免万向锁，会使用更稳定的**四元数（Quaternion）**来表示旋转。 

当你通过欧拉角修改物体的 rotation 属性时，Three.js 会在后台自动将欧拉角转换为四元数来存储和处理。 

欧拉角使用示例

下面是一个简单的 Three.js 代码示例，演示如何使用欧拉角来旋转一个立方体: 

javascript

// 创建场景、相机和渲染器...
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

camera.position.z = 5;

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 来改变立方体的欧拉角，从而让它在渲染循环中持续旋转。