玩转3D图形！用p5.js轻松绘制炫酷的立方体

前端

2022-12-16 05:30:31

用 p5.js 探索 3D 图形世界的无限可能

在当今的数字世界中，3D 图形已成为不可或缺的一部分，广泛应用于游戏、电影、艺术、设计等领域。对于开发人员而言，p5.js 是一款绝佳的 JavaScript 库，可轻松创建 3D 图形，既强大又易于使用，非常适合初学者。

p5.js 简介：3D 图形创作变得简单

p5.js 是一款流行的 JavaScript 库，可以让开发人员轻松创建交互式图形、动画和应用程序。其 3D 图形绘制功能尤为强大且有趣。p5.js 采用 WebGL 技术，可利用显卡加速图形渲染，实现流畅的 3D 动画。

绘制立方体步骤：手把手教你实现

创建 p5.js 画布

首先，创建一个 p5.js 画布，这是绘制图形的区域：

function setup() {
  createCanvas(600, 400, WEBGL);
}

定义立方体数据

接着，定义立方体数据，包括顶点坐标、边长、颜色等：

const vertices = [
  [-1, -1, -1], // 前左下
  [1, -1, -1], // 前右下
  [1, 1, -1], // 前右上
  [-1, 1, -1], // 前左上
  [-1, -1, 1], // 后左下
  [1, -1, 1], // 后右下
  [1, 1, 1], // 后右上
  [-1, 1, 1], // 后左上
];

const edges = [
  [0, 1],
  [1, 2],
  [2, 3],
  [3, 0],
  [4, 5],
  [5, 6],
  [6, 7],
  [7, 4],
  [0, 4],
  [1, 5],
  [2, 6],
  [3, 7],
];

const colors = [
  [255, 0, 0], // 红色
  [0, 255, 0], // 绿色
  [0, 0, 255], // 蓝色
  [255, 255, 0], // 黄色
  [255, 0, 255], // 品红
  [0, 255, 255], // 青色
];

绘制立方体

最后，使用 p5.js 函数绘制立方体：

function draw() {
  background(0);

  // 设置视点
  camera(0, 0, 500);

  // 旋转立方体
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  // 绘制立方体
  for (let i = 0; i < edges.length; i++) {
    const edge = edges[i];
    const color = colors[i % colors.length];

    stroke(color);
    line(vertices[edge[0]][0], vertices[edge[0]][1], vertices[edge[0]][2], vertices[edge[1]][0], vertices[edge[1]][1], vertices[edge[1]][2]);
  }
}