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

如果你已经会用box()、sphere()画简单 3D 形状，想组合它们做出复杂模型，又担心画面卡顿，那么buildGeometry()就是你的 "性能救星"。这个函数能把多个简单形状 "焊接" 成一个自定义 3D 模型，让绘制效率飙升。

什么是 buildGeometry ()？

buildGeometry()是 p5.js 中用于组装复杂 3D 模型的工具函数。它的核心作用就像 "预制构件厂"：

• 把多个简单 3D 形状（比如box()、sphere()）组合成一个完整的p5.Geometry对象（可以理解为 "自定义 3D 零件"）；
• 这个 "零件" 只需要在程序启动时制作一次，之后每次绘制直接调用即可，大幅减少重复计算；
• 必须在WebGL 模式下使用（和所有 3D 函数一样）。

buildGeometry()就是来解决这个问题的：它能把多个简单 3D 形状 “打包” 成一个p5.Geometry对象，只需创建一次，之后反复绘制都不会卡顿。就像快递打包，把多个小包裹捆成一个大包裹，搬运起来更高效～

基础用法

用buildGeometry打包一个球体，然后绘制它。

let myShape; // 存储打包好的3D对象

function setup() {
  // 开启WebGL模式（3D绘图必备）
  createCanvas(400, 400, WEBGL);
  // 用buildGeometry创建3D对象，回调函数是makeShape
  myShape = buildGeometry(makeShape);
}

function draw() {
  background(200); // 灰色背景
  orbitControl(); // 允许鼠标拖动旋转视角
  lights(); // 添加光照（3D物体需要光照才看得见）
  model(myShape); // 绘制打包好的3D对象
}

// 回调函数：定义要打包的形状
function makeShape() {
  sphere(50); // 画一个半径50的球体
}

旋转的几何花朵

用buildGeometry组合多个锥体，形成一朵 “花”，然后让它随时间旋转并变色，展示高性能复杂 3D 动画的实现。

let flower;
let hueValue = 0; // 色相值（用于颜色变化）

function setup() {
  createCanvas(600, 600, WEBGL);
  // 创建几何花朵
  flower = buildGeometry(makeFlower);
}

function draw() {
  background(0); // 黑色背景
  orbitControl(); // 允许鼠标旋转视角
  lights(); // 光照
  
  // 颜色随时间变化（HSB模式：色相、饱和度、亮度）
  colorMode(HSB);
  fill(hueValue % 360, 80, 90);
  hueValue += 0.5;
  
  // 整体旋转（X和Y轴同时转，更有动感）
  // rotateX(frameCount * 0.005);
  rotateY(frameCount * 0.008);
  
  model(flower); // 绘制花朵
}

// 构建花朵形状的回调函数
function makeFlower() {
  // 中心球体
  sphere(15);
  
  // 周围的“花瓣”：12个锥体
  for (let i = 0; i < 12; i++) {
    push();
    // 绕Y轴均匀分布（360度/12=30度一个）
    rotateY(i * PI / 6);
    // 沿Z轴向外移动
    translate(0, 0, 40);
    // 锥体：底面半径10，高30，朝上
    cone(10, 30);
    pop();
  }
  
}

---

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

也可以➕我 green bubble 吹吹水咯

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

如果你刚接触 p5.js，想尝试 3D 绘图，那么box()函数绝对是你的入门首选。它能快速绘制出 3D 长方体（或正方体），配合简单的交互就能做出酷炫的 3D