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

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

"use strict";
import { Object3D } from "three";
import { CSSObjectElementCopyObjectAttributes } from "./CSSObjectAttribute";
export class CSS3DObject extends Object3D {
  constructor(element = document.createElement("div")) {
    super();
    this.element = element;
    this.isCSS3DObject = true;
    this.element = element;
    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 class CSS3DSprite extends CSS3DObject {
  constructor(element) {
    super(element);
    this.isCSS3DSprite = true;
    this.rotation2D = 0;
    this.rotation2D = 0;
  }
  copy(source, recursive) {
    super.copy(source, recursive);
    this.rotation2D = source.rotation2D;
    return this;
  }
}
export function createCSS3DObject(options) {
  const { id, className, html, scale } = options;
  const element = document.createElement("div");
  element.id = id;
  element.className = className;
  element.innerHTML = html;
  const CSSObject = new CSS3DObject(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.quaternion.copy(options.object.quaternion);
    CSSObject.scale.multiplyScalar(scale);
    CSSObject.updateMatrix();
  }
  return CSSObject;
}