时间戳

首页 > 解决方案 > p5.j​​s 不绘制 3d 框

processing - p5.j​​s 不绘制 3d 框

问题描述

我正在使用 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);
}

这是水课：

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

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

任何帮助将不胜感激。提前致谢！

标签： processingp5.js

解决方案

删除需要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>

推荐阅读