import * as THREE from 'three';
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
export default class CSSRenderer {
  constructor(experience) {
    this.experience = experience;
    this.container = experience.container;
    this.canvas = experience.canvas;
    this.sizes = experience.sizes;
    this.scene = experience.scene;
    this.camera = experience.camera;

    this.setInstance();
  }
  setInstance() {
    this.instance = new CSS2DRenderer();
    this.instance.setSize(this.sizes.width, this.sizes.height);
    this.instance.domElement.style.position = 'absolute';
    this.instance.domElement.style.top = '0px';
    this.instance.domElement.style.left = '0px';
    this.instance.domElement.style.pointerEvents = 'none';
    this.container.appendChild(this.instance.domElement);

  }
  resize() {
    this.instance.setSize(this.sizes.width, this.sizes.height);
    this.instance.setPixelRatio(this.sizes.pixelRatio);
  }
  update() {
    this.instance.render(this.scene, this.camera.instance);
  }

  destroy() {
    this.instance.domElement.remove();
  }
}