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

如果你剛接觸 p5.js，想嘗試 3D 繪圖，那么box()函數絕對是你的入門首選。它能快速繪制出 3D 長方體（或正方體），配合簡單的交互就能做出酷炫的 3D 效果。本文會從基礎到進階，帶你吃透這個實用 API。

box

box()是 p5.js 中專門用于繪制 3D 立方體的函數。它具有以下幾個特點：

• 自帶 6 個面，每個面都和相鄰面成 90° 角（直角）；
• 必須在WebGL 模式下使用（3D 繪圖的基礎模式）；
• 參數靈活，可通過調整參數控制大小和細節。

基礎用法

要使用box()，首先得創建支持 3D 的畫布。記住：必須用WEBGL模式，否則盒子不會顯示！

function setup() {// 創建300x300的WebGL畫布（支持3D）createCanvas(300, 300, WEBGL);
}function draw() {background(220); // 灰色背景orbitControl();  // 允許鼠標拖動旋轉視角（必加！否則3D效果看不出來）box(); // 繪制默認盒子
}

運行后，你會看到一個灰色背景上的白色盒子。拖動鼠標可以 360° 旋轉查看。

box()有 5 個可選參數，分別控制盒子的尺寸和表面細節。記住，參數是按順序生效的。

box([width], [height], [depth], [detailX], [detailY])

width（寬度）

• 作用：控制盒子沿 X 軸的長度；
• 默認值：50；
• 示例：box(100) → 寬度為 100，其他尺寸默認（高度 = 寬度，深度 = 高度）。

height（高度）

• 作用：控制盒子沿 Y 軸的長度；
• 默認值：等于 width（所以只傳 1 個參數時是正方體）；
• 示例：box(100, 200) → 寬 100，高 200，深度默認等于高度（200）。

depth（深度）

• 作用：控制盒子沿 Z 軸的長度（3D 的 “厚度”）；
• 默認值：等于 height；
• 示例：box(100, 200, 50) → 寬 100，高 200，深 50（扁平狀）。

detailX（X 軸細分）

• 作用：控制盒子表面沿 X 軸的三角形細分數量（細分越多，表面越平滑，但性能消耗略高）；
• 默認值：1（最基礎的細分，棱角明顯）；
• 示例：box(100, 100, 100, 5) → X 軸用 5 個細分，表面更細膩。

detailY（Y 軸細分）

• 作用：控制盒子表面沿 Y 軸的三角形細分數量；
• 默認值：1；
• 示例：box(100, 100, 100, 5, 8) → X 軸 5 細分，Y 軸 8 細分，表面更平滑。

上色和動畫

一個彩色的長方體，會緩慢旋轉，顏色隨時間從紅→綠→藍循環變化，拖動鼠標可從任意角度觀察。

function setup() {createCanvas(400, 400, WEBGL);
}function draw() {background(0); // 黑色背景orbitControl();// 隨時間旋轉（X和Y軸同時轉）rotateX(frameCount * 0.01); // frameCount是當前幀數，讓旋轉隨時間變化rotateY(frameCount * 0.01);// 彩色盒子（HSL顏色模式：色相隨時間變化）fill(frameCount % 360, 100, 50); // 色相0-360循環，飽和度100，亮度50// 尺寸：寬150，高100，深80，細分3（表面更平滑）box(150, 100, 80, 3);
}

跳動的彩色盒子陣列

用box()做一個酷炫的特效：多個盒子組成陣列，隨鼠標位置和時間跳動，顏色也動態變化。

let spacing = 120; // 盒子間距
let boxSize = 60; // 基礎大小function setup() {createCanvas(800, 600, WEBGL);noFill(); // 無填充，只顯示邊框strokeWeight(2); // 邊框粗細
}function draw() {background(0);orbitControl();// 旋轉整個場景，增強3D感rotateX(-0.3);rotateY(frameCount * 0.005);// 繪制3x3陣列的盒子for (let x = -spacing; x <= spacing; x += spacing) {for (let y = -spacing; y <= spacing; y += spacing) {for (let z = -spacing; z <= spacing; z += spacing) {push(); // 保存當前狀態translate(x, y, z); // 移動到目標位置// 隨時間和鼠標位置變化大小（跳動效果）let size = boxSize * 0.5 + sin(frameCount * 0.05 + x*0.1 + mouseX*0.01) * 20;// 顏色隨位置變化stroke(x + 200, y + 200, z + 200);box(size); // 繪制盒子pop(); // 恢復狀態}}}
}

---

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

也可以?我 green bubble 吹吹水咯

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