Three.js - Textures

ThreeJS - Snippets
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

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

TextureLoader

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

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

TextureLoader Callbacks Manchmal nützlich für Fehlersuche etc.

const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load(
    '/textures/door/color.jpg',
    () =>
    {
        console.log('load')
    },
    () =>
    {
        console.log('progress')
    },
    () =>
    {
        console.log('error')
    }
)

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.

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