body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

h3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  text-align: center;
}
import {
  AxesHelper,
  Color,
  HemisphereLight,
  LinearEncoding,
  MeshStandardMaterial,
  Mesh,
  PerspectiveCamera,
  PMREMGenerator,
  sRGBEncoding,
  SphereGeometry,
  Scene,
  UnsignedByteType,
  WebGLRenderer
} from "https://cdn.jsdelivr.net/npm/three@0.114.0/build/three.module.js";

import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/controls/OrbitControls.js";

import { RGBELoader } from "https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/loaders/RGBELoader.js";

const envMapURL =
  "https://rawcdn.githack.com/mrdoob/three.js/3a7b71e0f47fb105e1ecd63b152f1c09fac6d015/examples/textures/equirectangular/royal_esplanade_1k.hdr";

async function init() {
  const renderer = new WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.outputEncoding = sRGBEncoding;

  document.body.appendChild(renderer.domElement);

  const pmremGenerator = new PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();

  const scene = new Scene();
  scene.background = new Color(0x4285f4);

  const camera = new PerspectiveCamera(
    40,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  camera.position.set(20, 20, 20);

  new OrbitControls(camera, renderer.domElement);

  const geometry = new SphereGeometry(5, 12, 8);

  const material = new MeshStandardMaterial({
    // create all colors this way
    // if you are trying to match CSS or photo colors
    color: new Color(0x4285f4).convertSRGBToLinear()
  });

  const mesh = new Mesh(geometry, material);
  scene.add(mesh);

  scene.add(new AxesHelper(20));

  const envMap = await loadEnvironment();

  // THIS FAILS
  // scene.environment = envMap;

  // THIS WORKS
  const envMapPMREM = createPMREM(pmremGenerator, envMap);
  scene.environment = envMapPMREM;

  renderer.setAnimationLoop(() => {
    renderer.render(scene, camera);
  });

  window.addEventListener("resize", () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    composer.setSize(window.innerWidth, window.innerHeight);
  });
}

async function loadEnvironment() {
  const loader = new RGBELoader().setDataType(UnsignedByteType);

  return new Promise((resolve, reject) => {
    loader.load(envMapURL, data => resolve(data), null, reject);
  });
}

function createPMREM(pmremGenerator, texture) {
  const envMap = pmremGenerator.fromEquirectangular(texture).texture;
  texture.dispose();
  pmremGenerator.dispose();

  return envMap;
}

init();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.