134.3.241.3 am 28. Dezember 2021 um 18:21 Uhr

2021-12-28T18:21:47Z

134.3.241.3: Die Seite wurde neu angelegt: „ThreeJs - Snippets Besonders wichtig für realistische Ergebnisse ist das MeshStandardMaterial. Siehe unten. === MeshBasicMaterial ===
2021-12-28T18:21:32Z

Die Seite wurde neu angelegt: „ThreeJs - Snippets Besonders wichtig für realistische Ergebnisse ist das MeshStandardMaterial. Siehe unten. === MeshBasicMaterial === <syntaxhighlight la…“

Neue Seite
[[ThreeJs - Snippets]]

Besonders wichtig für realistische Ergebnisse ist das MeshStandardMaterial. Siehe unten.
=== MeshBasicMaterial ===
<syntaxhighlight lang="javascript">
const material = new THREE.MeshBasicMaterial()
material.color.set(0xaabb00)
material.map = doorColorTexture
material.side = DoubleSide
material.wireframe = true
material.transparent = true
material.opacity = 0.5
material.alphaMap = doorAlphaTexture
</syntaxhighlight>

Komplexere Materialien haben natürlich weitere Eigenschaften
=== MeshNormalMaterial ===
<syntaxhighlight lang="javascript">
// normally to debug normals
const material = new THREE.MeshNormalMaterial()
material.flatShading = true
</syntaxhighlight>

=== MeshMatcapMaterial ===
https://github.com/nidorx/matcaps - gute Quelle
MeshMatcapMaterial is a fantastic material because of how great it can look while being very performant.
* Performant
* simuliert Licht ohne Lichtquelle
* gut für's Modelling

For it to work, the MeshMatcapMaterial '''needs a reference texture that looks like a sphere'''.
The material will then pick colors on the texture according to the normal orientation relative to the camera.
To set that reference matcap texture, use the matcap property. For it to work, the MeshMatcapMaterial needs a reference '''texture that looks like a sphere'''. The material will then pick colors on the texture according to the normal orientation relative to the camera.

<syntaxhighlight lang="javascript">
// MATCAP
const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture
</syntaxhighlight>

=== MeshDepthMaterial ===
Nahe Bereiche werden hell, ferne dunkel gerendert. Kann man z.B. für Camera Tests oder für Nebel nutzen

<syntaxhighlight lang="javascript">
// DEPTH
const material = new THREE.MeshDepthMaterial()
material.transparent = true
material.opacity = 0.8
</syntaxhighlight>

=== MeshLambertMaterial ===
* Benötigt / Reagiert mit Licht
* Performant
* Ergibt manchmal Linien-Artefakte in der Geometrie
<syntaxhighlight lang="javascript">
// LAMBERT (reacts to light)
const material = new THREE.MeshLambertMaterial()
</syntaxhighlight>

=== MeshPhongMaterial ===
Ähnlich wie Lambert.
* Keine Artefakte
* Weniger Performant
* Erlaubt auch Lichtreflexion nicht nur Schattierung
<syntaxhighlight lang="javascript">
// PHONG
const material = new THREE.MeshPhongMaterial
material.color.set(0xddeeee) // Grundfarbe
material.shininess = 180 // Glanz
material.specular = new THREE.Color(0x0066ff) // Glanzlichtfarbe
</syntaxhighlight>

=== MeshToonMaterial ===
Reduziert die Farbverläufe und erzeugt dadurch einen Cartoonartigen Effekt.

Man kann einen Gradienten (Pixellinie mit verschiedenen Graustufen) übergeben, der dann für die Schattierungen verwendet wird. Dann sollte man allerdings den NearestFilter verwenden, damit der Standardfilter die Abstufungen beim Mipmapping nicht kaputt macht.
<syntaxhighlight lang="javascript">
const gradientTexture = textureLoader.load('textures/gradients/3.jpg')
gradientTexture.generateMipmaps = false
gradientTexture.minFilter = THREE.NearestFilter
gradientTexture.magFilter = THREE.NearestFilter

// TOON
const material = new THREE.MeshToonMaterial()
material.gradientMap = gradientTexture
</syntaxhighlight>

=== MeshStandardMaterial ===
Das wahrscheinlich am meisten verwendete Material, vor allem wenn es um realistische Renders geht. Es ist ein PBR Material und unterstützt entsprechende Parameter.

* Besserer Algorithmus zur Lichtberechnung als Phong oder Lambert
* Physic Based Rendering (PBR) Material
* Unterstützt PBR Parameter wie metalness oder roughness
* Ergibt ähnliche Ergebnisse wie in Blender etc. wenn man dort die gleichen PBR Materialien nutzt.

Manche der Maps benötigen Tweaks bei den Objekten (siehe Kommentare)

<syntaxhighlight lang="javascript">
// TEXTURES
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load('textures/door/color.jpg')
const doorAlphaTexture = textureLoader.load('textures/door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('textures/door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('textures/door/height.jpg')
const doorMetalnessTexture = textureLoader.load('textures/door/metalness.jpg')
const doorNormalTexture = textureLoader.load('textures/door/normal.jpg')
const doorRoughnessTexture = textureLoader.load('textures/door/roughness.jpg')

// STANDARD MATERIAL
const material = new THREE.MeshStandardMaterial()
material.side = DoubleSide
material.map = doorColorTexture

material.roughness = 1 // default
material.roughnessMap = doorRoughnessTexture

material.metalness = 0 // default
material.metalnessMap = doorMetalnessTexture

material.aoMap = doorAmbientOcclusionTexture
material.aoMapIntensity = 1.1

material.displacementMap = doorHeightTexture
material.displacementScale = 0.03

material.normalMap = doorNormalTexture
material.normalScale.set(0.5,0.5)

material.transparent = true // needed for alpha to work
material.alphaMap = doorAlphaTexture

// OBJECTS
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(1,1,100,100), // subdivisions needed for height map
material
)
// copy uv coordinates to uv2 attribute needed by aomap
plane.geometry.setAttribute(
'uv2',
new THREE.BufferAttribute(plane.geometry.attributes.uv.array,2)
)
</syntaxhighlight>

=== MeshPhysicalMaterial ===
Wie MeshStandardMaterial bietet aber noch zusätzlich ein Coating. Also z.b. ein Material unter einer Lackschicht.
https://threejs.org/examples/#webgl_materials_physical_clearcoat
* Zusätzlich Coating
* Nicht so Performant wie Standard

=== PointsMaterial ===

You can use PointsMaterial with particles.

=== ShaderMaterial and RawShaderMaterial ===

ShaderMaterial and RawShaderMaterial can both be used to create your own materials.

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

=== Hinweise ===
Eigenschaften kann man als Konstruktor Objekt übergeben oder direkt setzen oder über set (manchmal praktischer, wenn als Eigenschaftswert ein Objekt erwartet wird (z.B. bei der Farbe ein Farbobjekt)

← Nächstältere Version		Version vom 28. Dezember 2021, 18:21 Uhr
Zeile 1:		Zeile 1:
−	[[~~ThreeJs~~ - Snippets]]	+	[[ThreeJS - Snippets]]

	Besonders wichtig für realistische Ergebnisse ist das MeshStandardMaterial. Siehe unten.		Besonders wichtig für realistische Ergebnisse ist das MeshStandardMaterial. Siehe unten.

Three.js - materials - Versionsgeschichte

134.3.241.3 am 28. Dezember 2021 um 18:21 Uhr