我必须在这里犯了一些编码错误,因为我一直在调整这段代码,并且已经让它在过去几周内成功运行了。现在看来我收到了错误;我不太清楚为什么。当我评论此行(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();
}
}
&#13;
<script src="https://p5js.org/assets/js/p5.min.js"></script>
&#13;
答案 0 :(得分:2)
问题不在于调用sphere
,而在于设置球体的翻译
rotateZ(-lat[i]);
不是数组而是数字时,设置lat
。这会通过计算发送NaN,这会在尝试渲染球体时导致致命错误。
我不确定您要尝试实现的目标,但将其更改为rotateZ(lat)
可以消除错误并提供可见的结果