p5.js 绘制 3D 椭球体 ellipsoid
点赞 + 关注 + 收藏 = 学会了
ellipsoid() 是 p5.js 中用于绘制 3D 椭球体的函数，就像 3D 版本的椭圆。它可以创建各种形状的球体和椭球体，是 3D 绘图中非常基础且常用的函数。
基本语法
ellipsoid(w, h, d, [detailX], [detailY])
w：椭球体在 X 轴方向的宽度h：椭球体在 Y 轴方向的高度d：椭球体在 Z 轴方向的深度detailX（可选）：X 方向的细节级别，值越大表面越光滑，默认 12detailY（可选）：Y 方向的细节级别，默认 12
动手试试
先绘制一个简单的椭球体，在setup()中设置 3D 画布，并在draw()中设置相机视角。
function setup() { // 创建3D画布，需要指定WEBGL参数 createCanvas(600, 400, WEBGL); } function draw() { background(220); // 添加简单光照，让3D效果更明显 ambientLight(150); pointLight(255, 255, 255, 100, 100, 200); // 旋转椭球体，让我们能看到3D效果 rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); // 绘制一个球体（当w=h=d时就是球体） fill(100, 150, 255); ellipsoid(80, 150, 100); }这段代码很简单，我逐一讲讲关键方法
createCanvas(600, 400, WEBGL)：创建 3D 画布，必须添加WEBGL参数才能使用 3D 函数ambientLight()和pointLight()：添加光照让 3D 物体有立体感rotateX()和rotateY()：让物体随时间旋转，方便观察 3D 效果ellipsoid(80, 150, 100)：绘制一个椭球体的三维参数。而当三个维度数值相等时，绘制的就是一个标准球体
不同参数的效果
一起看看改变参数会产生什么效果：
function setup() {createCanvas(800, 600, WEBGL);
}function draw() {background(20);ambientLight(100);directionalLight(255, 255, 255, 0, 0, -1);// 旋转整个场景orbitControl(); // 允许用户通过鼠标旋转视角// 左侧：橄榄球形状（X轴拉长）push(); // 保存当前坐标系状态translate(-200, 0, 0); // 向左移动fill(255, 100, 100);ellipsoid(100, 50, 50); // X轴更长pop(); // 恢复坐标系状态// 中间：正常球体push();fill(100, 255, 100);ellipsoid(80, 80, 80); // 所有轴相等pop();// 右侧：扁平形状（Y轴压缩）push();translate(200, 0, 0); // 向右移动fill(100, 100, 255);ellipsoid(80, 40, 80, 24, 24); // 更高细节级别pop();
}
搞点猛的
做一个动态气泡效果。
let bubbles = [];
let numBubbles = 15;function setup() {createCanvas(800, 600, WEBGL);// 创建多个气泡for (let i = 0; i < numBubbles; i++) {bubbles.push({x: random(-width/2, width/2),y: random(-height/2, height/2),z: random(-500, 500),size: random(20, 80),speed: random(0.5, 3),rotX: random(0.01),rotY: random(0.01),hue: random(180, 240) // 蓝色系气泡});}// 启用鼠标控制视角orbitControl();
}function draw() {background(10);// 添加环境光和方向光ambientLight(30);directionalLight(255, 255, 255, 0, 1, -1);// 绘制所有气泡for (let b of bubbles) {push();// 移动到气泡位置translate(b.x, b.y, b.z);// 旋转气泡rotateX(frameCount * b.rotX);rotateY(frameCount * b.rotY);// 设置气泡颜色和透明度noStroke();fill(b.hue, 200, 255, 200);// 绘制椭球体作为气泡let w = b.size * random(0.8, 1.2); // 轻微变形，更自然let h = b.size * random(0.8, 1.2);let d = b.size * random(0.8, 1.2);ellipsoid(w, h, d, 20, 20);pop();// 移动气泡（Z轴方向）b.z += b.speed;// 当气泡移出视野，重置位置if (b.z > 600) {b.z = -600;b.x = random(-width/2, width/2);b.y = random(-height/2, height/2);}}
}
这个案例创建了一个气泡数组，每个气泡都有自己的位置、大小、速度等属性。使用随机值让每个气泡的大小略有不同，看起来更自然。通过translate()将每个气泡放置在不同位置，每个气泡有独立的旋转速度，增加动态效果。使用半透明颜色和光照，营造出气泡的通透感，当气泡移出视野时，会在另一侧重新出现，形成循环效果。
以上就是本文的全部内容了，想了解更多P5.js玩法的工友欢迎关注《P5.js中文教程》
点赞 + 关注 + 收藏 = 学会了