将设置 'WEBGL' 加载到 P5.js 中的 createCanvas() 方法时出现问题

Question

我正在尝试在 Angular 中使用 P5.js 加载 3D 模型 8. 创建 3D canvas 的语法是

createCanvas(100, 100, WEBGL);

in Angular WEBGL 被认为是在某处定义的变量并抛出此错误。

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

我试过这样修改

createCanvas(100, 100, 'WEBGL');

但是当这样做时我得到这个错误

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

这表示它想要一个不带括号的值。我该如何处理？

更新

我想我会分享更多代码，以便更清楚地了解我将如何做这件事。

我是这样将p5库导入到组件中的

import * as p5 from 'p5';

在我的组件中，我有一个看起来像这样的函数

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
        );
    }

我在 ngOnInit() 中这样调用这个函数

ngOnInit(){ this.createGraphic(); }

我尝试按照下面的答案中的建议使用 this.WEBGL，但在终端中收到错误提示

WEBGL does not exist on type...

因为它正在我的组件上搜索它。我也在控制台中收到此错误

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

我为 P5.js 安装了 @types 库以使其与 TypeScript 一起工作。我成功地获得了 2D 演示并继续尝试 3D，但遇到了这些问题。

Answer 1

我花了一些时间来设置您的流程，但我假设您是通过 instance method.

使用 p5.js

您的导入需要：

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.

然后您通过以下方式实例化 p5：

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

演示 stackblitz

Answer 2

实际上，我需要做的就是向其中添加 p 以使其保持在范围内。

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

将设置 'WEBGL' 加载到 P5.js 中的 createCanvas() 方法时出现问题

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

typescript

p5.js

angular