p5.js：绘制各种内置的几何体，还能旋转

原创

已于 2025-03-17 21:49:08 修改 · 449 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #p5.js #几何体

于 2025-03-16 14:47:45 首次发布

向豆包提问：请编写 p5.js 示例，绘制各种内置的几何体，能让这些几何体缓慢旋转。

cd p5-demo
copy .\node_modules\p5\lib\p5.min.js .

此代码创建了一个包含多个内置几何体的 3D 场景，每个几何体都有不同的颜色和位置。运行代码后，你会看到球体、立方体、圆锥体、圆柱体、圆环体和椭球体在画布上的展示。
编写 p5_demo_6.html 如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js Geometries</title>
  <script src="p5.min.js"></script>
</head>
<body>
<script>
    let angle = 0;

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

    function draw() {
      background(220);
      angle += 0.01;

      // 绘制球体 sphere
      push();
      translate(-300,-150, 0);
      rotateX(angle);
      rotateY(angle);
      stroke(255, 100);
      fill(128, 0, 0);
      sphere(100);
      pop();

      // 绘制立方体 box
      push();
      tr