@polygonjs/polygonjs
Version:
node-based WebGL 3D engine https://polygonjs.com
67 lines (66 loc) • 1.99 kB
JavaScript
;
import { TypedCopNode } from "./_Base";
import { NodeParamsConfig, ParamConfig } from "../utils/params/ParamsConfig";
import { TextureParamsController, TextureParamConfig } from "./utils/TextureParamsController";
import { CanvasTexture } from "three";
export function CanvasCopNodeParamConfig(Base) {
return class Mixin extends Base {
constructor() {
super(...arguments);
/** @param HTML id of the canvas element */
this.canvasId = ParamConfig.STRING("canvas-id");
/** @param forces the texture to update */
this.update = ParamConfig.BUTTON(null, {
cook: false,
callback: (node) => {
CanvasCopNode.PARAM_CALLBACK_update(node);
}
});
}
};
}
class CanvasCopParamConfig extends TextureParamConfig(CanvasCopNodeParamConfig(NodeParamsConfig)) {
}
const ParamsConfig = new CanvasCopParamConfig();
export class CanvasCopNode extends TypedCopNode {
constructor() {
super(...arguments);
this.paramsConfig = ParamsConfig;
this.textureParamsController = new TextureParamsController(this);
}
static type() {
return "canvas";
}
async cook() {
const elementId = this.pv.canvasId;
const element = document.getElementById(elementId);
if (!element) {
this.states.error.set(`element with id '${elementId}' not found`);
this.cookController.endCook();
return;
}
if (!(element instanceof HTMLCanvasElement)) {
this.states.error.set(`element found is not a canvas`);
this.cookController.endCook();
return;
}
const texture = new CanvasTexture(element);
await this.textureParamsController.update(texture);
this.setTexture(texture);
}
//
//
// CALLBACK
//
//
static PARAM_CALLBACK_update(node) {
node.markTextureNeedsUpdate();
}
markTextureNeedsUpdate() {
const texture = this.containerController.container().texture();
if (!texture) {
return;
}
texture.needsUpdate = true;
}
}