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

p5.js 3D盒子的基础用法

news 2025/8/16 6:23:20

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

如果你刚接触 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(); // 恢复状态}}}
}