向 豆包 提问：请编写 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
)
