当前位置：首页 > news >正文

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

news 2025/8/4 8:58:51

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

在 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，亮度50model(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，高40cone(15, 40); pop(); // 恢复坐标系，准备下一个锥体}return endGeometry(); // 打包星团模型并返回
}