旋转、缩放、平移几何体 · 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() 改的是物体的 模型矩阵，顶点数据不变。

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

实现步骤

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

代码要点


import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene();

// 网格模型Mesh其实就一个一个三角形(面)拼接构成
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    0, 0, 0,
    50, 0, 0,
    50, 0, 50,

    0, 0, 0,
    0, 0, 50,
    50, 0, 50,
]);

geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);


// 点渲染模式
const material2 = new THREE.PointsMaterial({
    color: 0xffff00,
    size: 10.0 //点对象像素尺寸
});
const points = new THREE.Points(geometry, material2); //点模型对象
scene.add(points);
// 线材质对象
const material1 = new THREE.LineBasicMaterial({
    color: 0xff0000 //线条颜色
});
// 创建线模型对象
const line = new THREE.Line(geometry, material1);
scene.add(line);
// 网格
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);
// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);
// 居中：已经偏移的几何体居中，执行.center()，你可以看到几何体重新与坐标原点重合
geometry.center();
// 几何体旋转、缩放或平移之后，查看几何体顶点位置坐标的变化
// BufferGeometry的旋转、缩放、平移等方法本质上就是改变顶点的位置坐标
console.log('顶点位置数据', geometry.attributes.position);


// AxesHelper
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

// 相机
const camera = new THREE.PerspectiveCamera();  //相机
camera.position.set(200, 200, 200); //相机位置
camera.lookAt(0, 0, 0);   //相机观察位置

// 渲染器
const renderer = new THREE.WebGLRenderer(); // 创建渲染器
const box = document.getElementById('box');
renderer.setSize(box.clientWidth, box.clientHeight); //渲染区域
renderer.render(scene, camera); //执行渲染
box.appendChild(renderer.domElement);;

const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', function () {
    renderer.render(scene, camera);
});

完整源码：GitHub

小结