Three.js 几何体变换

提示词

PLAINTEXT
1
使用 Three.js BufferGeometry 方法对几何体进行变换,包括缩放、平移、旋转和居中。

效果描述

这是一个展示如何对几何体进行变换的示例,包括缩放、平移、旋转和居中操作。

效果特性

  • 几何体缩放:scale() 方法缩放几何体
  • 几何体平移:translate() 方法平移几何体
  • 几何体旋转:rotateX() 方法旋转几何体
  • 几何体居中:center() 方法居中几何体
  • 多种渲染:点、线、网格同时渲染
  • 双面渲染:DoubleSide 渲染双面

核心参数

参数 说明
缩放倍数 2.0 XYZ 三方向都放大 2 倍
平移距离 50 沿 X 轴平移 50 单位
旋转角度 PI/4 绕 X 轴旋转 45 度
点大小 10.0 点云点的大小
线颜色 0xff0000 线条颜色

核心代码解析

创建几何体

JAVASCRIPT
1
2
3
4
5
6
7
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);

几何体变换

JAVASCRIPT
1
2
3
4
5
6
7
8
// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);
// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);
// 居中:已经偏移的几何体居中,执行.center(),你可以看到几何体重新与坐标原点重合
geometry.center();

多种渲染

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 点渲染模式
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);

技术亮点

  1. 几何体变换:直接修改几何体顶点位置
  2. 多种渲染:同时渲染点、线、网格
  3. 双面渲染:DoubleSide 渲染双面
  4. 居中操作:center() 重新居中几何体
  5. 变换顺序:变换按顺序应用到几何体

调试技巧

  1. 变换顺序:变换顺序影响最终结果
  2. 缩放影响:缩放影响后续平移距离
  3. 旋转中心:旋转围绕几何体中心
  4. 居中操作:center() 重置到原点
  5. 顶点查看:console.log 查看变换后的顶点

扩展方向

  1. 动态变换:动态应用几何体变换
  2. 变换动画:动画几何体变换
  3. 局部变换:对几何体局部进行变换
  4. 变换堆栈:保存和恢复变换状态
  5. 自定义变换:实现自定义变换函数

本文档由 ThreeLab 编辑整理,如需转载,请注明出处。