p5.js 用 beginGeometry () 和 endGeometry () 打造自定义 3D 模型

点赞 + 关注 + 收藏 = 学会了

在 p5.js 的 3D 绘图中，这两个函数是一对 "黄金搭档"：

beginGeometry()：像一个 "3D 模型的开关"，调用它之后，你画的所有简单 3D 形状（比如球体、圆锥）都会被 "收集" 起来，组合成一个完整的模型。
endGeometry()：关闭这个 "收集开关"，并把收集到的所有形状打包成一个p5.Geometry对象（可以理解为 "3D 模型的数据包"），最后用model()函数就能把这个模型画出来。

为什么需要它们？

想象你要画一个由 10 个球体组成的复杂模型：

如果每次刷新都重新画 10 个球体，会很卡（重复计算浪费性能）；
用beginGeometry()和endGeometry()把 10 个球体 "打包" 成一个模型，只需创建一次，之后反复绘制就会快很多！

核心优势：为不变的复杂 3D 模型 "提速"，尤其适合需要反复绘制的场景。

注意：只能在WebGL 模式 下使用（即画布必须用createCanvas(width, height, WEBGL)创建，因为 3D 绘图需要 WebGL 的支持）。

语法讲解

这两个函数都没有参数，用法非常简单：

js 复制代码

beginGeometry(); // 开始"收集"形状
// 在这里添加各种3D形状（如sphere()、cone()等）
let myModel = endGeometry(); // 结束"收集"，得到打包好的模型

基础用法

步骤 1：开启 3D 模式（WebGL）

js 复制代码

function setup() {
  createCanvas(400, 400, WEBGL); // 最后一个参数WEBGL必须加，开启3D画布
}

步骤 2：用两个函数 "打包" 模型

js 复制代码

let myModel; // 用来存打包好的模型

function setup() {
  createCanvas(400, 400, WEBGL);
  beginGeometry(); // 开始收集形状
  sphere(30); // 加一个球体（半径30）
  translate(60, 0, 0); // 坐标系右移60，避免和球体重叠
  cone(20, 50); // 加一个圆锥（底面半径20，高50）
  myModel = endGeometry(); // 结束收集，保存模型
}

步骤 3：绘制模型

js 复制代码

function draw() {
  background(200); // 灰色背景
  orbitControl(); // 允许鼠标拖拽旋转视角（3D必备交互）
  lights(); // 加光照，让模型有立体感（否则是平的）
  model(myModel); // 画出打包好的模型
}

完整代码

js 复制代码

let myModel; // 用来存打包好的模型

function setup() {
  createCanvas(400, 400, WEBGL);
  beginGeometry(); // 开始收集形状
  sphere(30); // 加一个球体（半径30）
  translate(60, 0, 0); // 坐标系右移60，避免和球体重叠
  cone(20, 50); // 加一个圆锥（底面半径20，高50）
  myModel = endGeometry(); // 结束收集，保存模型
}

function draw() {
  background(200); // 灰色背景
  orbitControl(); // 允许鼠标拖拽旋转视角（3D必备交互）
  lights(); // 加光照，让模型有立体感（否则是平的）
  model(myModel); // 画出打包好的模型
}

搞个炫酷点的东西

一个由 12 个锥体组成的 "星团"，会随时间旋转，鼠标可控制视角，颜色随旋转角度变化，搭配光影更有 3D 质感。

js 复制代码

let starCluster; // 星团模型
let angle = 0; // 旋转角度（控制动画）

function setup() {
  createCanvas(600, 600, WEBGL); // 大一点的3D画布
  starCluster = makeStarCluster(); // 创建星团模型
}

function draw() {
  background(0); // 黑色背景（突出星团）
  orbitControl(); // 鼠标旋转视角
  
  // 添加光影（增强3D质感）
  ambientLight(80); // 环境光（柔和照亮所有面）
  pointLight(255, 255, 255, 200, -200, 300); // 点光源（模拟远处的星光）
  
  // 让星团随时间旋转
  angle += 0.01; 
  rotateX(angle * 0.8); // 绕X轴旋转
  rotateY(angle); // 绕Y轴旋转（速度稍快）
  
  // 颜色随旋转角度变化（用HSL模式，色调循环0-360）
  colorMode(HSL); 
  fill((angle * 30) % 360, 70, 50); // 色调随角度变化，饱和度70，亮度50
  
  model(starCluster); // 绘制星团
}

// 创建星团模型（12个锥体从中心向外辐射）
function makeStarCluster() {
  beginGeometry(); // 开始收集形状
  
  for (let i = 0; i < 12; i++) { // 循环12次，创建12个锥体
    push(); // 保存当前坐标系
    
    // 计算角度：12个锥体均匀分布在360°（每次旋转30°）
    let rotation = radians(i * 30); // 角度转弧度（p5.js旋转用弧度）
    rotateZ(rotation); // 绕Z轴旋转，让锥体分布成圆形
    
    // 把锥体移到距离中心120像素的位置
    translate(120, 0, 0); 
    
    // 画锥体：半径15，高40
    cone(15, 40); 
    
    pop(); // 恢复坐标系，准备下一个锥体
  }
  
  return endGeometry(); // 打包星团模型并返回
}

辐射状结构 ：用for循环创建 12 个锥体，通过rotateZ让它们像钟表刻度一样均匀分布，形成星团；
动态旋转 ：rotateX和rotateY结合angle变量，让星团整体旋转，有 "漂浮感"；
颜色动画 ：HSL 颜色模式下，色调随angle变化（0-360 循环），实现自动变色；
光影层次 ：ambientLight（柔和环境光）+pointLight（定向点光源）让锥体有明暗对比，更像真实 3D 物体。

以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注《P5.js中文教程》。

可以➕我 green bubble 吹吹水咯

点赞 + 关注 + 收藏 = 学会了