旋转、缩放、平移几何体

Geometry Transform

▶ 在线运行案例

你将学到什么

• Geometry 变换 vs Mesh（Object3D）变换 的本质区别
• geometry.scale / translate / rotateX / center 直接改写顶点坐标
• 何时该改 geometry，何时该改 mesh.position/rotation

效果说明

对三角形几何体依次执行放大、平移、旋转，最后 center() 重新居中。控制台可看到 attributes.position.array 数值变化。

核心概念

Three.js 有两套变换体系：

层级	API	影响对象	典型场景
Object3D	mesh.position/rotation/scale	整个物体（矩阵变换）	移动/旋转模型
BufferGeometry	geometry.translate/rotateX/scale/center	顶点坐标本身	建模时调整形状、居中 pivot

geometry.scale(2, 2, 2);           // 顶点 ×2
geometry.translate(50, 0, 0);      // 顶点整体平移
geometry.rotateX(Math.PI / 4);     // 绕 X 轴旋转 45°
geometry.center();                 // 重新计算 bounding box 并移到原点

关键理解： geometry.translate() 改的是 Float32Array 里的数字；mesh.position.set() 改的是物体的 模型矩阵，顶点数据不变。

注意

Geometry 变换是 不可逆 的（除非 clone 备份）。运行时动画应优先用 mesh.rotation 等 Object3D 属性。

实现步骤

1. 创建 BufferGeometry 矩形（6 顶点）
2. 依次 scale → translate → rotateX → center
3. console.log(geometry.attributes.position) 观察变化
4. 创建 Points / Line / Mesh 展示

代码要点

geometry.scale(2, 2, 2);
geometry.translate(50, 0, 0);
geometry.rotateX(Math.PI / 4);
geometry.center();  // 几何体中心对齐世界原点

console.log('变换后顶点', geometry.attributes.position.array);

源码

完整源码见 在线案例。

// ... 创建 geometry + 6 顶点 ...

geometry.scale(2, 2, 2);
geometry.translate(50, 0, 0);
geometry.rotateX(Math.PI / 4);
geometry.center();

console.log('顶点位置数据', geometry.attributes.position);
// BufferGeometry 的 rotate/scale/translate 本质上就是改变顶点坐标

小结

• 建模/导入后 居中 pivot 常用 geometry.center()
• 运行时位移旋转 → 用 mesh；永久改形状 → 用 geometry
• 下一篇：阵列模型 — 循环创建大量 Mesh

入门案例 · Three.js · 10/15