Three.js - Environment Map (Panorama): Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „ 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. I…“) |
|||
| Zeile 1: | Zeile 1: | ||
[[ThreeJS - Snippets]] | [[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. | You can use it with many of the materials we saw. | ||
| Zeile 17: | Zeile 20: | ||
]) | ]) | ||
const material = new THREE.MeshStandardMaterial() | const material = new THREE.MeshStandardMaterial() | ||
| − | material.envMap = environmentMapTexture | + | material.envMap = environmentMapTexture // |
material.metalness = 0.7 | material.metalness = 0.7 | ||
material.roughness = 0.2 | material.roughness = 0.2 | ||
Aktuelle Version vom 31. Dezember 2021, 09:56 Uhr
ThreeJS - Snippets
CubeTexture[Bearbeiten]
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[Bearbeiten]
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/
