polygonjs-engine/dist/src/engine/nodes/sop/Css3DObject.js

node-based webgl 3D engine https://polygonjs.com

import {TypedSopNode} from "./_Base";
import {CSS3DObject} from "../../../modules/three/examples/jsm/renderers/CSS3DRenderer";
const ATTRIBUTE_NAME = {
  className: "class",
  text: "text"
};
const DEFAULT_VALUE = {
  className: "css2DObject",
  text: "default text"
};
import {NodeParamsConfig, ParamConfig} from "../utils/params/ParamsConfig";
class Css3DObjectSopParamsConfig extends NodeParamsConfig {
  constructor() {
    super(...arguments);
    this.className = ParamConfig.STRING(DEFAULT_VALUE.className);
    this.text = ParamConfig.STRING(DEFAULT_VALUE.text, {
      multiline: true
    });
  }
}
const ParamsConfig2 = new Css3DObjectSopParamsConfig();
export class Css3DObjectSopNode extends TypedSopNode {
  constructor() {
    super(...arguments);
    this.params_config = ParamsConfig2;
  }
  static type() {
    return "css3DObject";
  }
  initializeNode() {
    this.io.inputs.setCount(0, 1);
  }
  cook(input_contents) {
    const core_group = input_contents[0];
    if (core_group) {
      this._create_objects_from_input_points(core_group);
    } else {
      this._create_object_from_scratch();
    }
  }
  _create_objects_from_input_points(core_group) {
    const points = core_group.points();
    const objects = [];
    for (let point of points) {
      const className = point.attribValue(ATTRIBUTE_NAME.className) || DEFAULT_VALUE.className;
      const text = point.attribValue(ATTRIBUTE_NAME.text) || DEFAULT_VALUE.text;
      const object = Css3DObjectSopNode.create_css_object({
        className,
        text
      });
      object.position.copy(point.position());
      object.updateMatrix();
      objects.push(object);
    }
    this.setObjects(objects);
  }
  _create_object_from_scratch() {
    const object = Css3DObjectSopNode.create_css_object({
      className: this.pv.className,
      text: this.pv.text
    });
    Css3DObjectSopNode._assign_clone_method(object);
    this.setObjects([object]);
  }
  static create_css_object(params) {
    const element = document.createElement("div");
    element.className = params.className;
    element.textContent = params.text;
    const object = new CSS3DObject(element);
    object.matrixAutoUpdate = true;
    Css3DObjectSopNode._assign_clone_method(object);
    return object;
  }
  static _assign_clone_method(css_object) {
    css_object.clone = () => Css3DObjectSopNode.clone_css_object(css_object);
  }
  static clone_css_object(css_object) {
    const new_object = new CSS3DObject(css_object.element);
    new_object.matrixAutoUpdate = css_object.matrixAutoUpdate;
    this._assign_clone_method(new_object);
    return new_object;
  }
}