three.js 欧拉角

欧拉角（Euler angles）指的是物体在三维空间中绕三个轴线旋转的角度，也称为绕轴旋转（yaw-pitch-roll）或Tait-Bryan角。在Three.js中，可以使用欧拉角来设置模型的旋转角度。

欧拉角有许多不同的表示方法，例如将旋转分解为绕X轴、Y轴和Z轴的旋转角度，或将旋转表示为旋转轴和旋转角度等。在Three.js中，我们可以使用Three.js自带的欧拉角（Euler）类来表示欧拉角。

具体步骤如下：

1. 创建一个模型

这里以创建一个盒子（BoxGeometry）为例：

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

2. 设置模型的欧拉角

使用模型的欧拉角（rotation）属性来设置模型的欧拉角：

var euler = new THREE.Euler(0, 0, Math.PI / 4); // 欧拉角
cube.rotation.setFromEuler(euler); // 设置欧拉角

这里将模型绕Z轴旋转了45度（Math.PI/4）。

完整代码示例：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

var euler = new THREE.Euler(0, 0, Math.PI / 4); // 欧拉角

var animate = function () {
    requestAnimationFrame(animate);

    cube.rotation.setFromEuler(euler); // 设置欧拉角

    renderer.render(scene, camera);
};

animate();

这里同样使用了requestAnimationFrame函数来实现动画效果，每帧设置模型的欧拉角。