我有一个简单的烧瓶网站，我有一些p5.js草图动画播放，这一切都很好。我试图添加另一个草图，但唯一的区别是，这是使用WEBGL，这就是我认为我导致以下错误出现:
Uncaught TypeError: Cannot read property 'transpose3x3' of null
at p5.Matrix.inverseTranspose (p5.js:33125)
at p5.RendererGL._setMatrixUniforms (p5.js:34058)
at p5.RendererGL._bindImmediateBuffers (p5.js:33631)
at p5.RendererGL.endShape (p5.js:33554)
at p5.endShape (p5.js:17440)
at p.draw (square.js:55)
at p5.redraw (p5.js:16560)
at p5.<anonymous> (p5.js:11593)
at p5.<anonymous> (p5.js:11489)
我试图找到相关的问题，但没有能够任何，我使用p5实例模式，允许在一个页面上的多个草图。
* . html
<html>
<head>
<title>Pointless Projects </title>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='stylesheet.css')}}">
<script src=//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js type="text/javascript"></script>
<script src=//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.js type="text/javascript"></script>
<script src=//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.sound.js type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="{{url_for('static',filename='animations/Rings/libraries/p5.gui.js')}}"></script>
<script language="javascript" type="text/javascript" src="{{url_for('static',filename='animations/Rings/libraries/quicksettings.js')}}"></script>
<script type="text/javascript" src="{{url_for('static',filename='animations/Rings/Rings.js')}}"></script>
<script type="text/javascript" src="{{url_for('static',filename='animations/spinning/spinning.js')}}"></script>
<script type="text/javascript" src="{{url_for('static',filename='animations/square/square.js')}}"></script>
</head>
<body>
<div class="page_container">
<div class="navigation">
<a href="/">
<img id="logo" src="{{url_for('static',filename='images/pp.png')}}">
</a>
</div>
<div class="banner">
<p class=" banner_title">Animation Projects</p>
</div>
<div class="animation_panel">
<div class="animation_container">
<div id="square"></div>
</div>
<div class="animation_controller">
<p class='basic_font subheading'>Squares</p>
<div class='canvas_container_template' id="canvas_container_square"></div>
</div>
</div>
</div>
* . js
var sketchThree = function( p ) {
p.counter = 0;
p.r = 0;
p.g = 0;
p.b = 0;
p.rad = 0;
p.x = 0;
p.y = 0;
p.z = 0;
p.setup = function () {
p.createCanvas(800, 600, p.WEBGL);
p.angleMode(p.DEGREES);
};
p.draw = function () {
p.background(20);
p.rotateY(20);
p.r = p.map(p.sin(p.frameCount ), -1,1,50,255);
p.g = p.map(p.sin(p.frameCount / 4 ), -1,1,50,255);
p.b = p.map(p.sin(p.frameCount / 2), -1,1,50,255);
p.stroke(p.r,p.g,p.b);
p.fill(255, 0, 0);
p.counter += 15;
// Generates i number of circles
for(var i = 0; i < 50; i++){
p.strokeWeight(2);
// create a custom shape depending on amount of vertices
p.beginShape();
p.noFill();
//Creating circle shape using the sin and cos rule
for(var j = 0; j < 360; j+= 90){
p.rotate(p.cos(p.frameCount + i ) * 0.1);
//create size between each line
p.rad = i * 8;
//Bends vertrices around the cos and sin rule to create a circle
p.x = p.rad * p.cos(j);
p.y = p.rad * p.sin(j);
//movement of the shape on the z axis
// speed, time between each circle, movment of whole shape (13 20 10) basic
p.z = (p.sin(p.frameCount * 3 + i * 20) * 150);
p.vertex(p.x,p.y,p.z);
}
p.endShape(p.CLOSE);
}
};
};
var myp5 = new p5(sketchThree, 'square');
经过几个小时的搜索，我终于找到了这个。简而言之，它解释了rotate()不能很好地与WEBGL一起工作，但我们需要使用rotateZ()