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

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

news 来源：原创 2025/5/19 12:30:58

向豆包提问：请编写 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();
      translate(0,-150, 0);
      rotateX(angle);
      rotateY(angle);
      stroke(255, 100);
      fill(128, 128, 128);
      box(150);
      pop();

      // 绘制圆锥体 cone
      push();
      translate(300,-150, 0);
      rotateX(angle);
      rotateY(angle);
      stroke(255, 100);
      fill(0, 0, 128);
      cone(100, 200);
      pop();

      // 绘制圆柱体 cylinder
      push();
      translate(-300, 100, 0);
      rotateX(angle);
      rotateY(angle);
      stroke(255, 100);
      fill(128, 128, 0);
      cylinder(100, 200);
      pop();

      // 绘制圆环体 torus
      push();
      translate(0, 100, 0);
      rotateX(angle);
      rotateY(angle);
      stroke(255, 100);
      fill(128, 0, 128);
      torus(100, 30);
      pop();

      // 绘制椭球体 ellipsoid
      push();
      translate(300, 100, 0);
      rotateX(angle);
      rotateY(angle);
      stroke(255, 100);
      fill(0, 128, 128);
      ellipsoid(100, 150, 50);
      pop();
    }

</script>
</body>
</html>

在上述代码中，定义了一个变量 angle 用于控制旋转角度。在 draw 函数里，每次绘制时 angle 都会增加 0.01，然后通过 rotateX 和 rotateY 方法让每个几何体绕 X 轴和 Y 轴旋转。这样就实现了几何体的缓慢旋转效果。

双击打开 p5_demo_6.html

向 chat.deepseek.com 提问：请编写 p5.js 脚本，绘制各种内置的几何体，还能缓慢旋转。

下面是一个使用 p5.js 绘制各种内置几何体并使它们缓慢旋转的示例代码。这个脚本将绘制立方体、球体、圆锥体和圆柱体，并使它们围绕 Y 轴旋转。

编写 p5_demo_4.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(800, 600, WEBGL);
}

function draw() {
  background(30);
  
  // 设置光照
  pointLight(255, 255, 255, 0, 0, 500);
  ambientLight(100);
  
  // 绘制立方体
  push();
  translate(-width/4, -height/4, 0);
  rotateY(angle);
  fill(255, 0, 0);
  box(100);
  pop();
  
  // 绘制球体
  push();
  translate(width/4, -height/4, 0);
  rotateY(angle);
  fill(0, 255, 0);
  sphere(70);
  pop();
  
  // 绘制圆锥体
  push();
  translate(-width/4, height/4, 0);
  rotateY(angle);
  fill(0, 0, 255);
  cone(70, 150);
  pop();
  
  // 绘制圆柱体
  push();
  translate(width/4, height/4, 0);
  rotateY(angle);
  fill(255, 255, 0);
  cylinder(70, 150);
  pop();
  
  // 更新旋转角度
  angle += 0.01;
}
</script>
</body>
</html>

双击打开 p5_demo_4.html

代码说明：

setup() 函数：初始化画布并设置为 3D 模式（使用 WEBGL）。
draw() 函数：每一帧都会调用这个函数来绘制几何体。
push() 和 pop()：用于保存和恢复当前的绘图状态，确保每个几何体的变换不会影响其他几何体。
translate()：将几何体移动到画布的不同位置。
rotateY()：使几何体围绕 Y 轴旋转。
box()、sphere()、cone()、cylinder()：分别绘制立方体、球体、圆锥体和圆柱体。
angle：用于控制旋转的角度，每一帧增加 0.01，使几何体缓慢旋转。

运行效果：

立方体、球体、圆锥体和圆柱体会分别位于画布的四个象限。
所有几何体会围绕 Y 轴缓慢旋转。
使用了点光源和环境光来增强视觉效果。

DeepSeek 还提供了程序员喜欢的示例 p5_demo_5.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>
function setup() {
  createCanvas(1000, 600, WEBGL);
}

function draw() {
  background(220);
  rotateY(frameCount * 0.01); // 全局旋转
  // [ 立方体, 球体, 圆柱体, 圆锥体, 圆环体 ]
  const geometries = ['box','sphere','cylinder','cone','torus'];
  const spacing = 250;
  for (let i=0; i< geometries.length; i++) {
    push();
    translate(-spacing*2 + spacing*i, 0, 0);
    rotateZ(frameCount * 0.01);
    
    switch(geometries[i]) {
      case 'box':
        fill(255,0,0);
        box(50);
        break;
      case 'sphere':
        fill(0,255,0);
        sphere(50);
        break;
      case 'cylinder':
        fill(0,0,255);
        cylinder(50,100);
        break;
      case 'cone':
        fill(255,255,0);
        cone(50,100);
        break;
      case 'torus':
        fill(255,0,255);
        torus(50,20);
        break;
    }
    pop();
  }
}
</script>
</body>
</html>

双击打开 p5_demo_5.html