p5クラス化しthreejsに使う

スコープがよくわからないがとりあえず動いています

import * as THREE from 'three';
import p5 from "p5";

export class p5Main {

    public _canvasTex:THREE.CanvasTexture;
    public canvasElement:HTMLCanvasElement;
    public isInit:boolean=false;

    public width:number = 512;
    public height:number = 512;
    private _p5:p5;

    constructor(){

        new p5((p: p5)=>{
            /** 初期化処理 */
            p.setup = ()=>{
                this.setUp();
            }
            /** フレームごとの描画処理 */
            p.draw = ()=> {
                this.draw();
            }            
            this._p5 = p;
        });

    }

    setUp(){
        let r = this._p5.createCanvas(512, 512);
        r.id('p5canvas');
        this._p5.frameRate(5);
        this._p5.noSmooth();
        
        console.log(r.elt);
        this.canvasElement = r.elt;//scopeがよくわからない
        this.isInit=true;
    
        let dom = r.elt;
        //let dom = document.getElementById("p5Canvas");
        dom.style.position="absolute";
        dom.style.top = "0";
        dom.style.left = "0";
        dom.style.zIndex = "9999"
        dom.style.transformOrigin="0 0"
        dom.style.transform="scale(0.2,0.2)"
    }

    draw(){

        this._p5.background(0,0,0,255);
        this._p5.noStroke();
        
        let nn = 10;
        for(let i=0;i<nn;i++){
            for(let j=0;j<nn;j++){
                let col = Math.floor( Math.random()*10 )/10*255;
                let w = 512/nn;
                let h = 512/nn;
                this._p5.fill(0,col,0);
                this._p5.rect(w*i,h*j,w,h);
            }
        }

    }

    getCanvasTex():THREE.CanvasTexture{

        if( !this.isInit ) return null;

        if(this._canvasTex==null){
            this._canvasTex= new THREE.CanvasTexture(this.canvasElement)
            this._canvasTex.minFilter=THREE.NearestFilter;
            this._canvasTex.magFilter=THREE.NearestFilter;
        }
        this._canvasTex.needsUpdate=true;
        //this.uniforms.tex2.value = this._canvasTex;
        
        return this._canvasTex;
    }

}


〠FOOTER〠