Three.js 快速入门教程【七】常见几何体类型

系列文章目录

Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型
Three.js 快速入门教程【八】常见材质类型
Three.js 快速入门教程【九】光源类型
Three.js 快速入门教程【十】常见的纹理类型
Three.js 快速入门教程【十一】天空盒的多种实现方式
Three.js 快速入门教程【十二】外部模型加载
Three.js 快速入门教程【十三】外部模型加载后常见的处理操作
Three.js 快速入门教程【十四】使用Stats.js监控渲染帧率和性能优化
Three.js 快速入门教程【十五】交互神器DragControls使用详解，实现对物体或模型拖拽
Three.js 快速入门教程【十六】调试神器 gui.js使用详解，可视化面板控制场景参数提高开发效率
Three.js 快速入门教程【十七】射线拾取模型——射线与射线投射器Raycaster介绍
Three.js 快速入门教程【十八】射线拾取模型——鼠标点击屏幕选中模型或物体
Three.js 快速入门教程【十九】CSS2D渲染器介绍，实现场景中物体或设备标注标签信息
Three.js 快速入门教程【二十】三维模型优化实战：使用gltf-pipeline与Draco对模型进行压缩，提高加载速度和流畅性
Three.js 快速入门教程【二十一】CSS3D渲染器（CSS3DRenderer、CSS3DObject 、CSS3DSprite）介绍，实现场景中物体标注标签信息
Three.js 快速入门教程【二十二】动画神器Tween.js使用指南

---

---

一、前言

      在Three.js的三维世界中，几何体（Geometry）是构建所有可视对象的基础骨架。它定义了物体的形状和结构，如同建筑中的钢筋混凝土框架，理解几何体是掌握Three.js开发的关键一步。本文将带你快速了解 Three.js 中常见的几何体类型及其基本使用方法。

---

二、常见几何体类型

类型	构造函数参数示例	适用场景
长方体	new THREE.BoxGeometry(1, 1, 2)	建筑、箱子等方块物体
球体	new THREE.SphereGeometry(1, 32, 16)	行星、眼球等球状物体
圆柱体	new THREE.CylinderGeometry(5, 5, 2, 32)	柱子、管道等圆柱物体
圆锥	new THREE.ConeGeometry(1, 32, 16)	吊灯、穹顶等圆锥形状物体
矩形平面	new THREE.PlaneGeometry(5, 5, 32, 32)	地面、墙面等平面物体
圆平面	new THREE.CircleGeometry(5, 32)	仪表盘、齿轮等圆形物体
圆环	new THREE.TorusGeometry(5, 2, 16, 32)	环形物体、装饰元素

1、长方体（BoxGeometry）

长方体是最基本的几何体之一。可以通过 BoxGeometry 来创建一个长方体，它接受三个参数：长度、宽度和高度

// 创建一个场景
const scene = new THREE.Scene();
// 创建一个10x3x5长方体几何体
const geometry = new THREE.BoxGeometry(10, 3, 5);
// 创建一个材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建一个网格对象，将几何体和材质组合在一起
const cube = new THREE.Mesh(geometry, material);
// 将长方体添加到场景中
scene.add(cube);

2、球体（SphereGeometry）

SphereGeometry 用于创建球体，它接受两个主要参数：半径和分段数（分别控制经线和纬线的分段数量）。

// 创建一个半径为5球体
const geometry = new THREE.SphereGeometry(5, 32, 32);
//创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
// 创建一个网格对象，将几何体和材质组合在一起
const mesh = new THREE.Mesh(geometry, material);
//添加到场景中
scene.add(mesh);

3、 圆柱体（CylinderGeometry）

CylinderGeometry 用于创建圆柱体，它接受底面半径、顶面半径、高度、径向分段数、圆周分段数等参数。

// 创建一个上下面半径为3高为10的圆柱
const geometry = new THREE.CylinderGeometry(3, 3, 10, 32);
//创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 创建一个网格对象，将几何体和材质组合在一起
const mesh = new THREE.Mesh(geometry, material);
//添加到场景中
scene.add(mesh);

4、 圆锥（ConeGeometry）

ConeGeometry用于创建圆锥，它接受半径、高度、径向分段数等参数。

// 创建一个半径5，高度8圆锥几何体
const geometry = new THREE.ConeGeometry(5, 8, 32);
//创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xfff0f0 });
// 创建一个网格对象，将几何体和材质组合在一起
const mesh = new THREE.Mesh(geometry, material);
//添加到场景中
scene.add(mesh);

5、 矩形平面（PlaneGeometry）

PlaneGeometry 用于创建一个矩形平面，它接受宽度和高度两个参数，还可以设置宽度分段数和高度分段数。

// 创建一个宽10高5矩形平面
const geometry = new THREE.PlaneGeometry(10, 5, 32, 32);
//创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
// 创建一个网格对象，将几何体和材质组合在一起
const mesh = new THREE.Mesh(geometry, material);
//添加到场景中
scene.add(mesh);

6、 圆平面（CircleGeometry）

CircleGeometry用于创建一个圆平面，它接受半径和分段数两个参数

// 创建一个半径为5的圆平面
const geometry = new THREE.CircleGeometry(5, 32);
//创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xFF8E40 });
// 创建一个网格对象，将几何体和材质组合在一起
const mesh = new THREE.Mesh(geometry, material);
//添加到场景中
scene.add(mesh);

7、 圆环（TorusGeometry）

TorusGeometry用于创建一个圆环，它接受内半径、外半径、管状分段数、半径分段数等参数

// 创建一个圆环几何体
const geometry =  new THREE.TorusGeometry(5, 1, 16, 32);
//创建材质
const material = new THREE.MeshBasicMaterial({ color: 0xC046C4 });
// 创建一个网格对象，将几何体和材质组合在一起
const mesh = new THREE.Mesh(geometry, material);
//添加到场景中
scene.add(mesh);

ps:上面很多几何体都有可选的入参——分段数，分段数指的是在创建几何体时，将几何体的表面划分为多个更小的部分（通常是三角形面片）的数量。3D 图形库实际上是通过将复杂的几何形状拆分成大量简单的三角形面片来进行渲染的，分段数决定了这种拆分的精细程度。较高的分段数能带来更平滑、更精确的几何体外观，但会增加渲染负担；较低的分段数可以提高性能，但可能牺牲一定的视觉质量。开发者需要根据具体的应用场景和设备性能，合理调整分段数，以达到最佳的效果

三、几何体相关属性设置

1. 位置（position）

每个网格对象（Mesh）都有一个 position 属性，用于设置几何体在场景中的位置，它包含 x、y、z 三个分量。

mesh.position.set(1, 1, 1);

2.旋转（rotation）

rotation 属性用于设置几何体的旋转角度，它包含 x、y、z 三个分量，单位是弧度。

mesh.rotation.x = Math.PI / 4;//绕x轴旋转 π/4 弧度
mesh.rotation.y = Math.PI / 4;//绕y轴旋转 π/4 弧度

3. 缩放（scale）

scale 属性用于设置几何体的缩放比例，它包含 x、y、z 三个分量。

//几何体缩小2倍
mesh.scale.set(2, 2, 2);

---

五、总结

       通过以上对 Three.js 常见几何体类型和相关属性设置的介绍，相信你已经对如何创建和操作几何体有了基本的了解。在实际应用中，你可以根据具体需求选择合适的几何体类型，并灵活设置其属性，以构建出丰富多样的 3D 场景。

更多three.js入门知识点请关注该系列教程后续的更新。