p5.js 未绘制 3d 框

Question

我正在使用 P5.js 创建模拟器。在模拟器中，我需要一个绿色框，但它似乎没有出现。代码如下：

var outputs = [];

function setup() {
  createCanvas(600, 400, WEBGL);
  background(200);

  for (var i = 0; i < 1; i++) {
    drop = new Water(width / 2, height / 2, 0, 1);
    outputs[i] = drop;
  }
}

function draw() {
  push();
  translate(200, 150, 0);
  stroke(0, 100, 0);
  fill(0, 255, 0);
  box(150, 150, 150);
  pop();

  for (var i = 0; i < outputs.length; i++) {
    outputs[i].update();
  }

  background(200);
}

这是水class:

function Water(x_, y_, z_, yVel_) {

  this.r = random(0.25, 1);

  this.xOff = random(-(this.r / 10), (this.r / 10));
  this.zOff = random(-(this.r / 10), (this.r / 10));

  this.x = x_ + this.xOff;
  this.y = y_;
  this.z = z_ + this.zOff;

  this.yVel = yVel_;

  this.pos = createVector(this.x, this.y, this.z);

  this.show = function() {
    push();
    translate(this.pos.x, this.pos.y, this.pos.z);
    noStroke();
    fill(0, 0, 255);
    sphere(this.r * 2);
    pop();
  }

  this.update = function() {
    this.vel = createVector(random(-(this.r / 10), (this.r / 10)), 
                this.yVel, random(-(this.r / 10),
                (this.r / 10)));
    this.pos.add(this.vel);

    this.show();
  }
}

这是一个基于网络的模拟，另一个模块似乎工作正常。

如有任何帮助，我们将不胜感激。提前致谢！

Answer 1

删除需要 Water class 的部分，并将 background 函数调用移动到 draw 的顶部，似乎工作正常。

所以，问题是

要么是你忘了把 background 放在最上面
或者 Water class.

这是修复了上述问题的代码。

var outputs = [];

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {
  background(200);

  push();
  translate(200, 150, 0);
  stroke(0, 100, 0);
  fill(0, 255, 0);
  box(150, 150, 150);
  pop();

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>

Answer 2

它没有渲染，因为你的背景在你的场景上

function draw() {
  background(200);
  push();
  translate(200, 150, 0);
  stroke(0, 100, 0);
  fill(0, 255, 0);
  box(150, 150, 150);
  pop();

  for (var i = 0; i < outputs.length; i++) {
    outputs[i].update();
  }


}

你在画盒子和水滴，然后用你的背景把它们都盖起来如果你没有背景你会看到 p5.js 如何渲染动画 p5.js 不移动它，它只是循环绘制每一帧并且背景覆盖了前一帧

p5.js 未绘制 3d 框

p5.js not drawing a 3d box

processing

p5.js