如何解决p5.js 获取错误:未捕获的类型错误:无法读取 null 的属性“transpose3x3”
我有一个简单的 Flask 网站,我在其中播放了许多 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 ),255);
p.b = p.map(p.sin(p.frameCount / 2),255);
p.stroke(p.r,p.g,p.b);
p.fill(255,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');
解决方法
经过数小时的搜索,我终于找到了 this。简而言之,它解释了 rotate()
不适用于 WEBGL,而是我们需要使用 rotateZ()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。