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

Question

我有一个简单的 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 ), -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

经过几个小时的搜索，我终于找到了这个。 简而言之，它解释了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