點贊 + 關注 + 收藏 = 學會了

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

1. 輻射狀結構：用for循環創建 12 個錐體，通過rotateZ讓它們像鐘表刻度一樣均勻分布，形成星團；
2. 動態旋轉：rotateX和rotateY結合angle變量，讓星團整體旋轉，有 “漂浮感”；
3. 顏色動畫：HSL 顏色模式下，色調隨angle變化（0-360 循環），實現自動變色；
4. 光影層次：ambientLight（柔和環境光）+pointLight（定向點光源）讓錐體有明暗對比，更像真實 3D 物體。

---

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

可以?我 green bubble 吹吹水咯

點贊 + 關注 + 收藏 = 學會了