p5.js 中的未知 'transpose3x3' 错误？

Question

我一定是在这里犯了一些编码错误，因为我一直在调整这段代码，并且在过去的几周里运行成功了。现在看来我遇到了错误；我不太清楚为什么。当我评论这一行 (124):

时错误消失

sphere(20);

错误显示如下：

Uncaught TypeError: Cannot read property 'transpose3x3' of null
    at p5.Matrix.inverseTranspose (p5.js:31017)
    at p5.RendererGL._setMatrixUniforms (p5.js:31953)
    at p5.RendererGL.drawBuffers (p5.js:31676)
    at p5.sphere (p5.js:32444)
    at pointsSphereFibonacci (spheres_4.js:124)
    at draw (spheres_4.js:82)
    at p5.redraw (p5.js:14256)
    at p5.<anonymous> (p5.js:9143)
    at p5.<anonymous> (p5.js:9049)
    at new p5 (p5.js:9320)

如果您有任何想法，请告诉我！谢谢！

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  translate(width / 2, height / 2, -1000);
}

var r = 800;
var n = 1024;
var lon = [];
var lat = [];
var i = 0;

function draw() {
  background(247, 147, 135);
  ambientLight(240, 240, 240);

  push();
  rotateY(-radians(frameCount * .1));
  rotateX(radians(90 + frameCount * .08));
  rotateZ(radians(180 + frameCount * .03));
  pointSphereFibonacci(r, n); // draw sphere equally spaced points
  pop();
}

function pointSphereFibonacci(radius, points) {
  var phi = (sqrt(5) + 1) / 2 - 1; // golden ratio
  var ga = phi * 2 * PI; // golden angle

  for (var i = 0; i < points; i++) {

    lon[i] = ga * i;
    lon[i] /= 2 * PI;
    lon[i] -= floor(lon[i]);
    lon[i] *= 2 * PI;
    if (lon[i] > PI) {
      lon[i] -= 2 * PI;
    }
  }
  var lat = asin(-1 + 2 * i / points);

  for (var i = 0; i < points; i++) {

    push();
    rotateY(lon[i]);
    rotateZ(-lat[i]);
    translate(radius, 0, 0);
    ambientMaterial(5, 0, 223);
    sphere(20);
    pop();

  }
}

 <script src="https://p5js.org/assets/js/p5.min.js"></script>

Answer 1

问题不在于对 sphere 的调用，而在于设置球体的平移

当 lat 不是数组而是数字时，您设置了 rotateZ(-lat[i]);。这会通过计算发送 NaN，导致在尝试渲染球体时出现致命错误。

我不确定你想要达到什么目的，但是将其更改为 rotateZ(lat) 可以消除错误并给出可见的结果

p5.js 中的未知 'transpose3x3' 错误？

Unknown 'transpose3x3' Error in p5.js?

javascript

p5.js