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

本章主要学习知识点

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

顶点位置数据和点模型

数据特点

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

设置顶点数据

js 复制代码
// 创建一个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))

点模型

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

使用过程中需注意

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

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

js 复制代码
// 创建点模型材质
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闭合线条

js 复制代码
    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)结合,用于构建具有复杂表面的三维物体,其具有以下几个特点

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

使用场景

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

通过wireframe: true开启线框模式

js 复制代码
// 创建球体
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 案例中心

相关推荐
旧曲重听17 分钟前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿16 分钟前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉22 分钟前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽28 分钟前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课30 分钟前
React useEffect 详解与运用
前端·react.js
我想说一句31 分钟前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee12331 分钟前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
小鱼小鱼干34 分钟前
【Tauri】Tauri中Channel的使用
前端
拾光拾趣录36 分钟前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
南屿im39 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript