@polygonjs/polygonjs/dist/src/core/render/CSSRenderers/CSS2DObject.js

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

"use strict";
import { Object3D } from "three";
import { CSSObjectElementCopyObjectAttributes } from "./CSSObjectAttribute";
export class CSS2DObject extends Object3D {
  constructor(element = document.createElement("div")) {
    super();
    this.element = element;
    this.isCSS2DObject = true;
    this.element.style.position = "absolute";
    this.element.setAttribute("draggable", false);
  }
  copy(source, recursive) {
    super.copy(source, recursive);
    this.element = source.element.cloneNode(true);
    return this;
  }
}
export function createCSS2DObject(options) {
  const { id, className, html } = options;
  const element = document.createElement("div");
  element.id = id;
  element.className = className;
  element.innerHTML = html;
  const CSSObject = new CSS2DObject(element);
  CSSObject.matrixAutoUpdate = false;
  if (options.object) {
    CSSObjectElementCopyObjectAttributes(element, {
      ...options,
      object: options.object,
      CSSObject
    });
    let child;
    while (child = options.object.children.pop()) {
      CSSObject.add(child);
    }
    CSSObject.position.copy(options.object.position);
    CSSObject.updateMatrix();
  }
  return CSSObject;
}