在P5.js WEBGL模式下使用正弦波控制球体Y轴位移失效问题排查

你的问题核心不是WEBGL模式的锅，而是粒子的Y轴位置逻辑没正确更新。咱们一步步看问题出在哪，再改好它：

问题根源 #

1. 你在Particle构造函数里只计算了一次this.y = sin(this.angle) * 200，之后虽然this.angle在update里递增，但这个this.y的值再也没更新过，更没关联到粒子的实际位置this.pos.y上。
2. 粒子的位置this.pos初始化时Y轴是0，之后你只在update里累加了this.vel，但this.vel.y从一开始就固定了，根本没随着角度变化而改变。

修正后的代码 #

咱们调整逻辑，让Y轴位置直接由当前角度的正弦值决定，X轴保持匀速移动：

let particles = [];
let quantity = 20;

function setup() {
  createCanvas(300, 300, WEBGL);
  for (let i = 0; i < quantity; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  background(15);
  orbitControl();
  directionalLight(255, 255, 255, createVector(0, 0, -1));
  translate(-width / 2, 0); // 把原点移回左上角，和2D模式习惯一致
  particles.forEach(particle => {
    particle.update();
    particle.edges();
    particle.show();
  });
};

function Particle() {
  this.angle = random(TWO_PI); // 初始角度随机，让粒子运动错开
  this.r = 10;
  this.x = random(width);
  this.z = random(-50, 50);
  this.pos = createVector(this.x, 0, this.z); // 初始化位置，Z轴用上随机值
  this.velX = 2; // 只保留X轴的速度

  this.update = function() {
    // 更新X轴位置，保持匀速移动
    this.pos.x += this.velX;
    // 每次更新时，用当前角度计算Y轴的偏移量
    this.pos.y = sin(radians(this.angle)) * 100; // 用radians转角度为弧度，p5.js的sin用弧度
    this.angle += 3; // 控制摆动速度
  }

  this.edges = function() {
    if (this.pos.x >= width) {
      this.pos.x = 0;
      this.angle = random(TWO_PI); // 重置位置时也重置角度，避免重复运动
    }
  }

  this.show = function() {
    noStroke();
    push();
    translate(this.pos.x, this.pos.y, this.pos.z); // 加上Z轴的位移，体现3D效果
    sphere(this.r);
    pop();
  }
}

关键修改点 #

• 去掉了没用的this.y和this.vel.y，直接在update里实时计算this.pos.y，确保每次绘制都用最新的角度值。
• 用radians(this.angle)把角度转成弧度，因为p5.js的sin()函数默认接收弧度值，之前直接用角度数值会导致摆动异常快。
• 把Z轴的随机值用到了this.pos.z上，配合orbitControl()可以看到3D空间里的摆动效果。
• 重置粒子位置时顺便重置角度，让每个粒子的摆动更自然不重复。

这样修改后，WEBGL模式下的球体就能一边沿X轴移动，一边跟着正弦波上下摆动啦～

内容的提问来源于stack exchange，提问作者Tornado_code