Three.js - materials

ThreeJS - Snippets

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

MeshBasicMaterial

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

Komplexere Materialien haben natürlich weitere Eigenschaften

MeshNormalMaterial

// normally to debug normals
const material = new THREE.MeshNormalMaterial()
material.flatShading = true

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.

// MATCAP
const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture

MeshDepthMaterial

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

// DEPTH
const material = new THREE.MeshDepthMaterial()
material.transparent = true
material.opacity = 0.8

MeshLambertMaterial

• Benötigt / Reagiert mit Licht
• Performant
• Ergibt manchmal Linien-Artefakte in der Geometrie

// LAMBERT (reacts to light)
const material = new THREE.MeshLambertMaterial()

MeshPhongMaterial

Ähnlich wie Lambert.

• Keine Artefakte
• Weniger Performant
• Erlaubt auch Lichtreflexion nicht nur Schattierung

// PHONG
const material = new THREE.MeshPhongMaterial
material.color.set(0xddeeee) // Grundfarbe
material.shininess = 180 // Glanz
material.specular = new THREE.Color(0x0066ff) // Glanzlichtfarbe

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.

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

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)

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

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.

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

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)