Bearbeiten von „Three.js - Textures“

 Mesh Objekt > Geometry > Material > Textur
=== Prinzip' ===
'''Manuell:'''
* Bild Objekt erstellen 
* Texture Objekt erstellen und Bild Objekt zuordnen 
* Bildsource dem Bildobjekt zuordnen > 
* wenn Bild geladen ist (z.B addEventListener oder onload wie unten)texture.needsUpdate setzen, damit ThreeJs die Texture updaten kann 
* Texture dem Material zuordnen (Property map)

'''Mit TextureLoader (recommended):'''
* Wenn gewünscht LoadingManager erstellen
* TextureLoader erstellen und LoadingManager übergeben
* Bildquelle mit .load() in TextureLoader laden -> gibt texture Objekt zurück
* texture dem Material zuordnen

=== Beispiele ===

'''Beispiel 1 - manuell laden'''
<syntaxhighlight lang="javascript">
/**
 * Textures
 */
const image = new Image()
const texture = new THREE.Texture(image) 
image.src = '/textures/door/color.jpg'
image.onload = () => 
{
    texture.needsUpdate = true
}

//...

const material = new THREE.MeshBasicMaterial({ map: texture })
</syntaxhighlight>

=== TextureLoader ===
Der TextureLoader macht im Prinzip das Gleiche, erspart uns aber die onload Funktion :-). Ein TextureLoader kann für mehrere Texturen verwendet werden.

<syntaxhighlight lang="javascript">
/**
 * Textures
 */
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/door/color.jpg')
//...
const material = new THREE.MeshBasicMaterial({ map: texture })
</syntaxhighlight>

'''TextureLoader Callbacks'''
Manchmal nützlich für Fehlersuche etc.
<syntaxhighlight lang="javascript">
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load(
    '/textures/door/color.jpg',
    () =>
    {
        console.log('load')
    },
    () =>
    {
        console.log('progress')
    },
    () =>
    {
        console.log('error')
    }
)
</syntaxhighlight>

=== Loading Manager ===
Nützlich wenn viele Assets geladen werden müssen. Also z.B. viele Texturen. Wird erstellt und dann als Parameter dem TextureLoader übergeben. Dann kann man über die Callbacks den Ladevorgang checken und darauf reagieren.

<syntaxhighlight lang="javascript">

const loadingManager = new THREE.LoadingManager()

loadingManager.onStart = () =>
{
    console.log('onStart')
}
loadingManager.onLoad = () =>
{
    console.log('onLoad')
}
loadingManager.onProgress = () =>
{
    console.log('onProgress')
}
loadingManager.onError = () =>
{
    console.log('onError')
}

const textureLoader = new THREE.TextureLoader(loadingManager)

const colorTexture = textureLoader.load('/textures/door/color.jpg')
const alphaTexture = textureLoader.load('/textures/door/alpha.jpg')
const heightTexture = textureLoader.load('/textures/door/height.jpg')
const normalTexture = textureLoader.load('/textures/door/normal.jpg')
const ambientOcclusionTexture = textureLoader.load('/textures/door/ambientOcclusion.jpg')
const metalnessTexture = textureLoader.load('/textures/door/metalness.jpg')
const roughnessTexture = textureLoader.load('/textures/door/roughness.jpg')
</syntaxhighlight>