p5.js 3D 形状 “预制工厂“——buildGeometry ()

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

如果你已经会用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对象，回调函数是makeShapemyShape = 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 吹吹水咯

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