Three.js - Environment Map (Panorama)

ThreeJS - Snippets

The environment map is like an image of what's surrounding the scene. You can use it to add reflection or refraction to your objects. It can also be used as lighting information.

You can use it with many of the materials we saw.

// ENVIRONMENTAL MAP
const cubeTextureLoader = new THREE.CubeTextureLoader()

// load cube-images in the right order...
const environmentMapTexture = cubeTextureLoader.load([
    '/textures/environmentMaps/4/px.png',
    '/textures/environmentMaps/4/nx.png',
    '/textures/environmentMaps/4/py.png',
    '/textures/environmentMaps/4/ny.png',
    '/textures/environmentMaps/4/pz.png',
    '/textures/environmentMaps/4/nz.png',
])
const material = new THREE.MeshStandardMaterial()
material.envMap = environmentMapTexture
material.metalness = 0.7
material.roughness = 0.2

gui.add(material, 'metalness').min(0).max(1).step(0.0001)
gui.add(material, 'roughness').min(0).max(1).step(0.0001)

Cubemap erzeugen

Environment Maps gibt es in unterschiedlichen Formaten. Z.b. hier als HDRI:

https://polyhaven.com/

Es gibt Tools um diese in Cubemaps umzuwandeln:

https://matheowis.github.io/HDRI-to-CubeMap/