p5.js 出现错误：未捕获的类型错误：无法读取 null 的属性“transpose3x3”

Question

I have a simple flask website where I have a number of p5.js sketch animations playing, this all works fine.我有一个简单的 flask 网站，其中播放了许多 p5.js 草图动画，这一切都很好。 I'm trying to add another sketch but the only difference with this one is that it is using WEBGL, which is what I think I causing the following error to appear:我正在尝试添加另一个草图，但与这个唯一的区别是它使用的是 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)

I've tried to find related issues but not been able to anything, I'm using p5 instance mode to allow for multiple sketches on one page.我试图找到相关的问题，但什么也没做，我正在使用 p5 实例模式来允许在一页上绘制多个草图。

*.html *.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 *.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');

Answer 1

After hours of searching I finally found this .经过几个小时的搜索，我终于找到了这个。 In short it explains that rotate() does not work well with WEBGL but instead we need to use rotateZ()简而言之，它解释了rotate()不适用于 WEBGL，但我们需要使用rotateZ()

p5.js 出现错误：未捕获的类型错误：无法读取 null 的属性“transpose3x3”

问题描述

1 个解决方案

解决方案1
0 2021-02-28 14:39:01

p5.js 出现错误：未捕获的类型错误：无法读取 null 的属性“transpose3x3”

问题描述

1 个解决方案

解决方案1 0 2021-02-28 14:39:01

解决方案1
0 2021-02-28 14:39:01