Three.js缩放与旋转物体大揭秘：轻松搞定3D世界中的物体变换！

2023-04-29 05:58:28

缩放与旋转三维物体：three.js 入门指南

在三维计算机图形的世界里，缩放和旋转是控制物体位置和方向的两个基本操作。在流行的三维 JavaScript 库 three.js 中，这些操作可以轻松实现，让你能够创建逼真的三维场景。

一、缩放物体：从 Vector3 说起

在 three.js 中，缩放物体需要用到 scale 属性，这是一个 THREE.Vector3 类型的对象，包含了三个方向（x、y、z）的缩放比例。你可以直接使用 set 方法设置缩放比例，也可以分别设置每个方向的缩放值。

代码示例：

// 设置缩放比例
object.scale.set(2, 2, 2);

// 分别设置 x、y、z 方向的缩放比例
object.scale.x = 2;
object.scale.y = 2;
object.scale.z = 2;

此外，Vector3 的 multiply 方法可以对 scale 属性进行逐元素乘法，实现沿特定轴缩放的效果。

代码示例：

// 将 x 轴缩放比例缩小一半
object.scale.multiply(new THREE.Vector3(0.5, 1, 1));

二、旋转物体：欧拉角与四元数

旋转物体有两种主要方法：欧拉角和四元数。欧拉角是一种更直观的方式，它使用三个角度（绕 x、y、z 轴的旋转角度）来表示物体的旋转。四元数是一种更复杂的数学概念，但它避免了欧拉角可能会遇到的万向锁问题。

1. 欧拉角旋转

代码示例：

// 使用欧拉角旋转物体
object.rotation.set(Math.PI / 2, Math.PI / 4, Math.PI / 8);

2. 四元数旋转

代码示例：

// 使用四元数旋转物体
object.quaternion.set(0, 0, 0, 1);
object.quaternion.setFromAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 2);

三、缩放与旋转实例：缩放和旋转立方体

现在，让我们通过一个实例巩固缩放和旋转物体的知识。我们将创建一个立方体并对其进行缩放和旋转操作。

代码示例：

// 创建场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

// 将立方体添加到场景
scene.add(cube);

// 缩放立方体
cube.scale.set(2, 2, 2);

// 旋转立方体
cube.rotation.set(Math.PI / 2, Math.PI / 4, Math.PI / 8);

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

// 渲染场景
renderer.render(scene, camera);