Three.js教程:旋转、缩放、平移几何体

Three.js教程:旋转、缩放、平移几何体
推荐:将NSDT场景编辑器加到你的3D工具链
工具集:NSDT简石数字孪生

旋转、缩放、平移几何体

BufferGeometry通过.scale().translate().rotateX().rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。

// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);
// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);
// 几何体旋转、缩放或平移之后,查看几何体顶点位置坐标的变化
// BufferGeometry的旋转、缩放、平移等方法本质上就是改变顶点的位置坐标
console.log('顶点位置数据', geometry.attributes.position);

缩放.scale()

// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);

// 几何体旋转、缩放或平移之后,查看几何体顶点位置坐标的变化
// BufferGeometry的旋转、缩放、平移等方法本质上就是改变顶点的位置坐标
console.log('顶点位置数据', geometry.attributes.position);

平移.translate()

// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);

旋转.rotateX().rotateY().rotateZ()

// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);


居中.center()

geometry.translate(50, 0, 0);//偏移
// 居中:已经偏移的几何体居中,执行.center(),你可以看到几何体重新与坐标原点重合
geometry.center();
3D建模学习工作室
专注数字孪生、3D建模、3D仿真、虚拟现实

上一篇:Three.js教程:查看几何体顶点 (mvrlink.com)

下一篇:Three.js教程:三维向量Vector3与模型位置 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号