Three.js-硬要自学系列5 (顶点位置数据和点模型、线模型、网格模型)

本章主要学习知识点

• 了解几何体的顶点位置数据，使用点模型标注顶点位置
• 使用线模型在场景中绘制线条
• 了解什么是网格模型，并呈现模型

顶点位置数据和点模型

数据特点

• 顺序性：顶点数据按顺序排列，每三个数值定义一个顶点
• 灵活性：支持自定义任意数量的顶点，可创建不规则几何体
• 优化特性 ：通过顶点索引(geometry.index) 可复用顶点，减少内存占用

设置顶点数据

// 创建一个BufferGeometry对象
const geometry = new THREE.BufferGeometry();
// 创建顶点数据
const vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  2, 0, 0, //顶点2坐标
  0, 4, 0, //顶点3坐标
  0, 0, 0, //顶点4坐标
  0, 0, 4, //顶点5坐标
  2, 0, 0, //顶点6坐标
])
// 设置几何体顶点数据
geometry.setAttribute('position',new THREE.BufferAttribute(vertices,3))

点模型

点模型用于将几何体的每个顶点渲染为独立点状对象

使用过程中需注意

• 每个顶点对应一个可视化点
• 支持通过材质控制点的大小、颜色等属性
• 适用于粒子系统、星空效果等场景

添加点模型，并绑定顶点数据

// 创建点模型材质
const material = new THREE.PointsMaterial({
  color:'deepskyblue', // 线条颜色
  size:0.4   // 点的大小
})
// 创建点模型
point = new THREE.Points(geometry,material)
// 添加到场景
scene.add(point)

我们设置了6组顶点数据，对应的应该在场景中显示6个点模型，但从上图可以看到只有4个这是因为顶点1和顶点4，以及顶点2和顶点6是重叠的，因此场景中只显示4个点模型，实际上是渲染了6个

尝试动态修改顶点位置我们就能发现它们

线模型

three.js 中的线模型用于通过顶点数据绘制连续的线段或闭合线条，主要包含以下类型：

• Line：依次连接几何体的顶点数据，形成连续线段（不闭合）。
• LineLoop ：在 Line 基础上将首尾顶点连接，形成闭合线条。
• LineSegments：每两个顶点绘制一条独立线段，顶点不共享（如绘制点阵结构）。

使用场景

• 路径可视化：地图导航路线、运动轨迹
• 结构展示：建筑框架、分子模型
• 艺术效果：动态光流、抽象线条动画
• 辅助调试 ：显示模型三角面片分布（通过设置 mesh.material.wireframe = true）

关于线模型的材质

• 基础材质： LineBasicMaterial（支持颜色、透明度等）
• 虚线材质：LineDashedMaterial

创建线模型，使用基础材质，lineLoop闭合线条

    const geometry = new THREE.BufferGeometry()
    // 创建顶点数据
    const vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      2, 0, 0, //顶点2坐标
      0, 4, 0, //顶点3坐标
      0, 0, 0, //顶点4坐标
      0, 0, 4, //顶点5坐标
      2, 0, 0, //顶点6坐标
    ])
    // 设置几何体顶点数据
    geometry.setAttribute('position',new THREE.BufferAttribute(vertices,3))
    // 创建线材质
    const material = new THREE.LineBasicMaterial({color:'deepskyblue'})
    // 创建线模型对象
    // 闭合
    let line = new THREE.LineLoop(geometry,material)

网格模型

网格模型通过将几何体（Geometry）与材质（Material）结合，用于构建具有复杂表面的三维物体，其具有以下几个特点

• 三角形面片渲染：默认将几何体顶点数据分割为三角形面片进行渲染，每个三角形由三个顶点组成
• 正反面区分：通过顶点排列顺序（逆时针为正面，顺时针为反面）控制可见性，默认仅渲染正面
• 材质支持 ：支持多种材质类型（如 MeshBasicMaterial、MeshPhongMaterial 等），可定义颜色、纹理、光照响应等特性

使用场景

• 静态物体：建筑、机械零件等表面规则的物体
• 动态形变：通过修改顶点数据实现网格变形（如布料模拟）
• 复杂结构：通过组合多个网格模型构建层级化对象（如机器人关节）

通过wireframe: true开启线框模式

// 创建球体
const geometry = new THREE.SphereGeometry(1,20,20)
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 'deepskyblue', wireframe: true })
// 创建网格模型
cube = new THREE.Mesh(geometry,material)
// 添加到场景
scene.add(cube)

效果图

三种模型之间对比

模型类型	特点	适用场景
点模型(Points)	独立显示每个顶点	粒子系统、星空效果
线模型(Line)	顶点按顺序连接成线	路径可视化、结构框架
网格模型(Mesh)	顶点组合形成三角面	实体模型、复杂表面

以上案例均可在案例中心查看体验

THREE 案例中心