建议先阅读完文章，再查看 实例代码

在Three.js中，精准控制3D对象的旋转对于创建动态和交互式场景至关重要。本文将深入探讨.rotation属性和.Euler对象的使用，以及如何通过它们实现复杂的旋转效果。

1. 理解.Euler对象

.Euler对象是Three.js中用于表示绕X、Y、Z轴的旋转角度。与四元数相比，欧拉角更直观易懂，适合初学者。

创建和设置.Euler对象

// 创建一个绕X、Y、Z轴分别旋转45度、0度、90度的欧拉角对象
const euler = new THREE.Euler(Math.PI / 4, 0, Math.PI / 2);

// 或者，创建一个默认欧拉角对象并设置其值
const euler = new THREE.Euler();
euler.x = Math.PI / 4; // 绕X轴旋转45度
euler.y = Math.PI / 2; // 绕Y轴旋转90度
euler.z = Math.PI / 4; // 绕Z轴旋转45度

2. 操作.rotation属性

.rotation属性用于设置和获取3D对象的旋转状态。它直接对应于.Euler对象。

修改.rotation属性

const mesh = new THREE.Mesh(geometry, material);
mesh.rotation.y += Math.PI / 3; // 绕Y轴增加60度的旋转

3. 使用旋转方法

Three.js提供了.rotateX(), .rotateY(), .rotateZ()方法，用于在特定轴上应用旋转。

应用旋转方法

mesh.rotateY(Math.PI / 4); // 绕Y轴旋转45度

4. 实现动态旋转动画

通过在动画循环中递增.rotation属性，可以实现平滑的旋转动画。

动态旋转动画示例

function animate() {
  mesh.rotation.y += 0.01; // 绕Y轴旋转
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

5. 绕自定义轴旋转

.rotateOnAxis()方法允许绕任意定义的轴进行旋转，这为复杂的旋转效果提供了可能。

绕自定义轴旋转示例

const axis = new THREE.Vector3(1, 1, 1).normalize(); // 定义并归一化旋转轴
mesh.rotateOnAxis(axis, Math.PI / 8); // 绕该轴旋转

6. 完整实例：动态旋转的3D对象

以下是一个完整的示例，展示了如何创建一个3D场景，其中包含一个动态旋转的立方体。

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

// 创建立方体的几何体和材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加光源
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1, 1000);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// 动画循环
function animate() {
  cube.rotation.x += 0.01; // 绕X轴旋转
  cube.rotation.y += 0.01; // 绕Y轴旋转
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

这个示例创建了一个红色立方体，它将绕X轴和Y轴旋转，展示了如何使用.Euler对象和.rotation属性来实现动态旋转效果。通过调整animate()函数中的旋转增量，你可以控制旋转的速度和方向。