从旋转到缩放，three.js 几何变换的终极指南

前端

2023-07-31 17:26:33

用几何变换为你的三维场景增添活力

three.js是现代网页开发中一种强大的三维图形库，它为我们提供了各种工具来操纵和动画化三维物体。其中最强大的功能之一就是几何变换，它可以让我们控制物体在场景中的位置、方向和大小。

几何变换类型

几何变换主要有三种类型：位移、旋转和缩放，每种类型都以独特的方式改变物体的属性：

位移： 位移允许我们将物体沿着场景的x、y或z轴移动。
旋转： 旋转可以围绕任意轴旋转物体，从而创建出动态的动画效果。
缩放： 缩放可以改变物体的尺寸，从微小的调整到巨大的膨胀。

代码示例

让我们通过一些代码示例来深入了解如何使用这些几何变换：

位移：

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

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

// 移动立方体沿y轴向上移动1个单位
cube.translateY(1);

旋转：

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

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

// 围绕x轴旋转立方体45度
cube.rotateX(Math.PI / 4);

缩放：

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

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

// 沿x轴将立方体缩放2倍
cube.scaleX(2);