Three.js - Environment Map (Panorama)

ThreeJS - Snippets

CubeTexture

Die Environment Map funktioniert wie ein Bild, das die komplette Szene umspannt. Oft nutzt man dazu eine CubeTexture. Im Prinzip erzeugt man einen Würfel der die Szene umgibt und mit einer passenden Cubemap "bespannt" ist.

Die Environment Map kann man auch als "Lichtinformation" direkt auf Materialen als envMap einsetzen. So kann man auf recht einfache Weise Reflexionen oder Lichtbrechung eines Objekts generieren.

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/