未知' transpose3x3' p5.j​​s出错?

时间:2017-03-14 04:48:56

标签: javascript p5.js

我必须在这里犯了一些编码错误,因为我一直在调整这段代码,并且已经让它在过去几周内成功运行了。现在看来我收到了错误;我不太清楚为什么。当我评论此行(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)

如果您有任何想法,请告诉我!谢谢!

&#13;
&#13;
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();

  }
}
&#13;
 <script src="https://p5js.org/assets/js/p5.min.js"></script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

问题不在于调用sphere,而在于设置球体的翻译

rotateZ(-lat[i]);不是数组而是数字时,

设置lat。这会通过计算发送NaN,这会在尝试渲染球体时导致致命错误。

我不确定您要尝试实现的目标,但将其更改为rotateZ(lat)可以消除错误并提供可见的结果