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打包一个球体，然后绘制它。

js 复制代码

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 动画的实现。

js 复制代码

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 吹吹水咯

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