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 的支持）。

语法讲解

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

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

基础用法

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

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

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

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：绘制模型

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

完整代码

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 质感。

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(); // 打包星团模型并返回
}

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

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

可以➕我 green bubble 吹吹水咯

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