制作网站模板教程seo 视频
向 豆包 提问：请编写 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;// 绘制球体 spherepush();translate(-300,-150, 0);rotateX(angle);rotateY(angle);stroke(255, 100);fill(128, 0, 0);sphere(100);pop();// 绘制立方体 boxpush();translate(0,-150, 0);rotateX(angle);rotateY(angle);stroke(255, 100);fill(128, 128, 128);box(150);pop();// 绘制圆锥体 conepush();translate(300,-150, 0);rotateX(angle);rotateY(angle);stroke(255, 100);fill(0, 0, 128);cone(100, 200);pop();// 绘制圆柱体 cylinderpush();translate(-300, 100, 0);rotateX(angle);rotateY(angle);stroke(255, 100);fill(128, 128, 0);cylinder(100, 200);pop();// 绘制圆环体 toruspush();translate(0, 100, 0);rotateX(angle);rotateY(angle);stroke(255, 100);fill(128, 0, 128);torus(100, 30);pop();// 绘制椭球体 ellipsoidpush();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