p5.js 绘制 3D 椭球体 ellipsoid

点赞 + 关注 + 收藏 = 学会了

ellipsoid() 是 p5.js 中用于绘制 3D 椭球体的函数，就像 3D 版本的椭圆。它可以创建各种形状的球体和椭球体，是 3D 绘图中非常基础且常用的函数。

基本语法

javascript 复制代码

ellipsoid(w, h, d, [detailX], [detailY])

w：椭球体在 X 轴方向的宽度
h：椭球体在 Y 轴方向的高度
d：椭球体在 Z 轴方向的深度
detailX（可选）：X 方向的细节级别，值越大表面越光滑，默认 12
detailY（可选）：Y 方向的细节级别，默认 12

动手试试

先绘制一个简单的椭球体，在setup()中设置 3D 画布，并在draw()中设置相机视角。

复制代码

js 复制代码

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)：绘制一个椭球体的三维参数。而当三个维度数值相等时，绘制的就是一个标准球体

不同参数的效果

一起看看改变参数会产生什么效果：

js 复制代码

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();
}

搞点猛的

做一个动态气泡效果。

js 复制代码

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中文教程》

点赞 + 关注 + 收藏 = 学会了