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

德育处主任

发布于 2026-03-19 08:08:48

710

文章被收录于专栏：前端数据可视化前端数据可视化

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

如果你刚接触 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 用法欢迎关注

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-03-19，如有侵权请联系 cloudcommunity@tencent.com 删除

基础