p5.j​​s没有绘制3D框

Question

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

WKPreferences

这是水上课：

window

这是一个基于Web的仿真，带有另一个似乎运行良好的模块。

任何帮助将不胜感激。预先感谢！

Answer 1

删除需要Water类的部分，并将background函数调用移至draw的顶部，看来一切正常。

所以，问题是

• 您忘记将background放在顶部
• 或者Water类出了问题。

---

这是您的代码，其中已解决上述问题。

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.j​​s不会移动它，它只是循环绘制每帧，背景覆盖了前一帧