Three.js HDR EnvMap

CSS

html,
body,
canvas {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: white;
}

JavaScript

import * as THREE from '//cdn.skypack.dev/three@0.130.1'
import { OrbitControls } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/controls/OrbitControls.js'
import { RGBELoader } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/loaders/RGBELoader.js'
import { Reflector } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/objects/Reflector.js';

// WebGL renderer
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.outputEncoding = THREE.sRGBEncoding
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// Scene, Camera
const scene = new THREE.Scene()

const hdrUrl = 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/abandoned_greenhouse_1k.hdr'
new RGBELoader().load(hdrUrl, texture => {
  const gen = new THREE.PMREMGenerator(renderer)
  const envMap = gen.fromEquirectangular(texture).texture
  scene.environment = envMap
  
  texture.dispose()
  gen.dispose()
})


const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.set(-2, 0, -0.5)


// OrbitControls
const controls = new OrbitControls(camera, renderer.domElement)

// Mesh
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial({roughness: 0, metalness:1})
const mesh = new THREE.Mesh(geometry, material)
mesh.rotation.y = Math.PI * .25
mesh.rotation.z = Math.PI * .25
scene.add(mesh)

const reflector = new Reflector(new THREE.PlaneGeometry(10, 10, 10, 10), {
			color: 0xffffff,
			textureWidth: 2048,
			textureHeight: 2048,
			clipBias: 0.003,
			recursion: 0,
		});
    
    reflector.position.z = -0.8

    
  scene.add(reflector)
// Render loop
function animate() {
  requestAnimationFrame(animate)
  controls.update()
  renderer.render(scene, camera)
}
animate()

// Window sizing
window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
 ...