134.3.241.3 am 31. Dezember 2021 um 08:56 Uhr

2021-12-31T08:56:54Z

134.3.241.3: 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…“

2021-12-31T08:47:23Z

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…“

Neue Seite

[[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.
<syntaxhighlight lang="javascript">
// 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)

</syntaxhighlight>

==== 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/

@@ Zeile 1: / Zeile 1: @@
   [[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.
+== CubeTexture ==
 You can use it with many of the materials we saw.
@@ Zeile 17: / Zeile 20: @@
 ])
 const material = new THREE.MeshStandardMaterial()
-material.envMap = environmentMapTexture
+material.envMap = environmentMapTexture //
 material.metalness = 0.7
 material.roughness = 0.2

Three.js - Environment Map (Panorama) - Versionsgeschichte

134.3.241.3 am 31. Dezember 2021 um 08:56 Uhr

134.3.241.3: 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…“