Projection.js

import {
  PerspectiveCamera,
  CameraHelper,
  Color,
  MeshBasicMaterial,
  Mesh,
  PlaneGeometry,
  Vector2,
  DoubleSide,
  Object3D,
  TextureLoader,
} from "three";

// import ProjectedMaterial from "three-projected-material";

export default class Projection extends Object3D {
  camera;
  #layers;
  #layerNames;
  #bounds;
  #texture;
  #screen;
  material = {};
  helper = {};
  renderer;
  scene;
  renderTarget;
  plane;
  textureSource;
  attributes;
  ready = false;
  #focus;
  #opacity;
  #index;

  constructor({ quaternion, position, camera, file }, dir) {
    super();
    const fov = 2 * Math.atan(camera.width / (2 * camera.f)) * (180 / Math.PI);
    this.camera = new PerspectiveCamera(
      fov,
      camera.width / camera.height,
      1,
      2,
    );

    this.position.set(...position);
    this.setRotationFromQuaternion(quaternion);

    const textureLoader = new TextureLoader();
    const texture = textureLoader.load(`${dir}/images/${file}`);

    this.plane = new Mesh(
      new PlaneGeometry(1, 1),
      new MeshBasicMaterial({
        // transparent: true,
        // opacity: 0.4,
        map: texture,
        side: DoubleSide,
      }),
    );

    const scale = this.camera.getViewSize(this.camera.far, new Vector2());
    this.plane.scale.set(...scale, 1);
    this.plane.translateZ(-this.camera.far);

    this.helper = new CameraHelper(this.camera);
    this.#setHelperColor(0x00ff00);

    // this.add(this.helper);
    this.add(this.plane);
  }

  set index(index) {
    this.#index = index + 1;
    Object.keys(this.material).forEach((layer) => {
      if (layer === "vantage-renderer") return;
      this.#layers[layer].material[index + 1] = this.material[layer];
    });
  }

  get index() {
    return this.#index - 1;
  }

  set bounds({ bounds, auto }) {
    if (this.projectionType !== "map" || bounds == null) return;
    if (!auto) this.#bounds = bounds;
    this.camera.left = bounds[0];
    this.camera.right = bounds[1];
    this.camera.top = bounds[2];
    this.camera.bottom = bounds[3];
    this.update();
  }

  get bounds() {
    return this.#bounds;
  }

  set position(position) {
    this.camera.position.set(...position);
    this.update();
  }

  get position() {
    return this.camera.position;
  }

  set rotation(rotation) {
    this.camera.rotation.set(...rotation);
    this.update();
  }

  get rotation() {
    return this.camera.rotation;
  }

  set fov(fov) {
    this.camera.fov = fov;
    this.camera.updateProjectionMatrix();
    this.update();
  }

  get fov() {
    return this.camera.fov;
  }

  set far(far) {
    this.camera.far = far;
    this.camera.updateProjectionMatrix();
    this.update();
  }

  get far() {
    return this.camera.far;
  }

  #setHelperColor = (color) => {
    const c = new Color(color);
    this.helper.setColors(c, c, c, c, c);
  };

  updatePlane = () => {
    if (this.plane == null) return;
    this.plane.rotation.set(...this.camera.rotation);

    const position =
      this.projectionType === "map"
        ? [
            (this.camera.top + this.camera.bottom) / 2,
            this.camera.position.y,
            (this.camera.right + this.camera.left) / 2,
          ]
        : this.camera.position;

    this.plane.position.set(...position);
    const scale =
      this.projectionType === "map"
        ? [
            this.camera.right - this.camera.left,
            this.camera.top - this.camera.bottom,
          ]
        : this.camera.getViewSize(this.camera.far, new Vector2());

    this.plane.scale.set(...scale, 1);

    this.plane.translateZ(-this.camera.far + this.camera.far * 0.001);
  };
}