如何使用 WEBGL 在 p5.js 中画一条线

Question

3D 画线在 p5.js 中有效吗？

教程在这里： https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5 说应该可以，但我的尝试只是给出一个空白页。

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

function draw(){
  line(-100,-100,-100, 100,100,100);
}

正如下面的凯文所指出的，控制台给出了一个错误：

TypeError: this._renderer.line is not a function

当我尝试使用 line();

我的浏览器支持WEBGL，如果我把draw()写成

function draw(){
  box();
}

确实绘制了一个框。

目前我发现画线的唯一方法是编写我自己的函数

function drawLine(x1, y1, z1, x2,y2, z2){
  beginShape();
  vertex(x1,y1,z1);
  vertex(x2,y2,z2);  
  endShape();
}

确实在 3D 中画了一条线 space，但是控制台生成了很多形式的错误

Error: WebGL: vertexAttribPointer: -1 is not a valid index. This value probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program.

这样做，肯定也有问题。

Answer 1

Googling your error returns a ton of results, including this GitHub issue.

看来这是一个已知问题。 line() 功能应该可以工作，但尚未正确实现。

谷歌搜索你的第二个错误 returns this GitHub issue，它提到它可能是由于在绘制之前没有设置 fill() 颜色造成的。

Answer 2

ROFL.

If you sit by the river long enough, you will see the body of your enemy float by.

https://codepen.io/micrub/pen/rNGXJPJ?editors=0011

  push();
  fill(255);
  stroke(255);
  line(0, 0, 0, C_ZISE / F, 0, 0);
  pop();

  push();
  fill(255);
  stroke(255);
  line(0, 0, 0, 0, C_ZISE / F, 0);
  pop();

如何使用 WEBGL 在 p5.js 中画一条线

How to draw a line in p5.js using WEBGL

javascript

p5.js