Having a problem loading setting 'WEBGL' to the createCanvas() method in P5.js

问题

I'm trying to load a 3D model with P5.js in Angular 8. the syntax for creating a 3D canvas is

createCanvas(100, 100, WEBGL);

in Angular WEBGL is regarded as if it were a variable defined somewhere and throws this error.

core.js:6014 ERROR Error: Uncaught (in promise): ReferenceError: WEBGL is not defined ReferenceError: WEBGL is not defined

I tried modifying it like this

createCanvas(100, 100, 'WEBGL');

But when doing that I get this error

p5.js says: createCanvas() was expecting P2D|WEBGL for parameter #2 (zero-based index), received string instead at...

which is indicating it wants a value without parenthesis. How am I supposed to handle this?

UPDATE

I figured I'd share more code to be clearer about how I'm going about doing this.

I import the p5 library into the component like this

import * as p5 from 'p5';

inside my component I have a function that looks like this

private createGraphic(){
    const frameSize: any = this.calcFrameSize(); //calculates a width and height

    this.P5 = new p5(p =>{

            let importedModel: any;  //for pre loading the object

            p.preload = () =>{
                importedModel = p.loadModel(this.Element, true);
                //the this.Element variable is a string aiming to the .obj file
            }

            p.setup = () => {
                p.createCanvas(frameSize.width, frameSize.height, WEBGL); 
            };

            p.draw = () => {
                p.background(255, 17, 180);
                p.fill(0);
                p.scale(0.88);
                p.normalMaterial();
                p.model(importedModel);
            };
        },
        this.GraphicContainer.nativeElement
        //the target for injecting the object
        );
    }

I call this function inside the ngOnInit() like this

ngOnInit(){ this.createGraphic(); }

I tried using this.WEBGL as suggested in the answer bellow and am getting an error in the terminal saying

WEBGL does not exist on type...

because it's searching for it on my component. I'm also getting this error in the console

Error: normalMaterial() is only supported in WEBGL mode. If you'd like to use 3D graphics and WebGL,

I installed the @types library for P5.js to get it working with TypeScript. I successfully got a 2D demo working and moved on to try 3D and am having these problems.

回答1:

Took me a while to setup you process, but I assume you are using p5.js via the instance method.

Your import needs to be:

import p5 from "p5";

For this import syntax to work and not throw an error, you need to set allowSyntheticDefaultImports (in compiler options) in tsconfig.json to true and have esModuleInterop set to true.

And you instantiate p5 via:

const myp5 = new p5((sketch) => {
  sketch.setup = function() {
    sketch.createCanvas(700, 410, this.WEBGL);
  };
});

Demo on stackblitz

回答2:

Actually it turns out all I needed to do was add p to it to keep it in scope.

p.createCanvas(frameSize.width, frameSize.height, p.WEBGL);

来源：https://stackoverflow.com/questions/59295824/having-a-problem-loading-setting-webgl-to-the-createcanvas-method-in-p5-js

标签

angular

typescript

p5.js