Three.js 几何体变换
提示词
使用 Three.js 的 BufferGeometry 方法对几何体进行变换,包括缩放、平移、旋转和居中。
效果描述
这是一个展示如何对几何体进行变换的示例,包括缩放、平移、旋转和居中操作。
效果特性
- 几何体缩放:scale() 方法缩放几何体
- 几何体平移:translate() 方法平移几何体
- 几何体旋转:rotateX() 方法旋转几何体
- 几何体居中:center() 方法居中几何体
- 多种渲染:点、线、网格同时渲染
- 双面渲染:DoubleSide 渲染双面
核心参数
| 参数 |
值 |
说明 |
| 缩放倍数 |
2.0 |
XYZ 三方向都放大 2 倍 |
| 平移距离 |
50 |
沿 X 轴平移 50 单位 |
| 旋转角度 |
PI/4 |
绕 X 轴旋转 45 度 |
| 点大小 |
10.0 |
点云点的大小 |
| 线颜色 |
0xff0000 |
线条颜色 |
核心代码解析
创建几何体
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);
几何体变换
geometry.scale(2, 2, 2);
geometry.translate(50, 0, 0);
geometry.rotateX(Math.PI / 4);
geometry.center();
多种渲染
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);
技术亮点
- 几何体变换:直接修改几何体顶点位置
- 多种渲染:同时渲染点、线、网格
- 双面渲染:DoubleSide 渲染双面
- 居中操作:center() 重新居中几何体
- 变换顺序:变换按顺序应用到几何体
调试技巧
- 变换顺序:变换顺序影响最终结果
- 缩放影响:缩放影响后续平移距离
- 旋转中心:旋转围绕几何体中心
- 居中操作:center() 重置到原点
- 顶点查看:console.log 查看变换后的顶点
扩展方向
- 动态变换:动态应用几何体变换
- 变换动画:动画几何体变换
- 局部变换:对几何体局部进行变换
- 变换堆栈:保存和恢复变换状态
- 自定义变换:实现自定义变换函数
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!