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

Question

在 p5.js 中可以进行 3D 画线吗？

教程在这里: 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 空间中画了一条线，但控制台生成了许多以下形式的错误

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返回大量结果，包括 this GitHub issue .

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

谷歌搜索第二个错误返回 this GitHub issue ，其中提到这可能是由于在绘制之前没有设置 fill() 颜色引起的。