three.js fake env map

EnvironmentSphere.js

import * as THREE from "three";
// Local imports
import levelLogic from "@common.js/logic/logic.level.js";
import webGLLogic from "@common.js/logic/logic.webgl.js";
import assetLogic from "@common.js/logic/logic.assets.js";

class EnvironmentSphere {
  constructor(filepath, radius = 60) {
    console.assert(
      filepath !== undefined,
      "missing filepath for EnvironmentSphere"
    );
    var pmremGenerator = new THREE.PMREMGenerator(webGLLogic.values.renderer);
    assetLogic.values.textureLoader.load(filepath, (texture) => {
      texture.encoding = THREE.sRGBEncoding;
      this.envSphere = new THREE.Mesh(
        new THREE.SphereGeometry(radius, 32, 32),
        new THREE.MeshBasicMaterial()
      );
      this.envSphere.material.side = THREE.DoubleSide;
      this.envSphere.material.map = texture;
      this.envSphere.material.needsUpdate = true;
      levelLogic.values.scene.add(this.envSphere);

      // const envMap = pmremGenerator.fromEquirectangular(texture).texture;
      // levelLogic.values.scene.envMap = envMap;
      // levelLogic.values.scene.background = envMap;
      // pmremGenerator.dispose();
      // texture.dispose();
    });
  }
}

export default EnvironmentSphere;