将“WEBGL"设置加载到 P5.js 中的 createCanvas() 方法时出现问题 [英] Having a problem loading setting 'WEBGL' to the createCanvas() method in P5.js

问题描述

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

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

在 Angular 中，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参考错误:未定义 WEBGL

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

我试着像这样修改它

createCanvas(100, 100, 'WEBGL');

但是这样做时我收到此错误

But when doing that I get this error

p5.js 说:createCanvas() 期望 P2D|WEBGL 用于参数 #2(从零开始的索引)，而是在...处接收到字符串.

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?

更新

我想我会分享更多代码，以便更清楚地了解我将如何执行此操作.

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

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

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

我像这样在 ngOnInit() 内部调用这个函数

I call this function inside the ngOnInit() like this

ngOnInit(){ this.createGraphic(); }

我尝试按照下面的答案中的建议使用 this.WEBGL 并且在终端中收到错误消息

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

WEBGL 在类型上不存在...

WEBGL does not exist on type...

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

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

错误:normalMaterial() 仅在 WEBGL 模式下受支持.如果您想使用 3D 图形和 WebGL，

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

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

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.

推荐答案

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

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

这篇关于将“WEBGL"设置加载到 P5.js 中的 createCanvas() 方法时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！