three.js
10 Textures

Textures

Les textures sont des images qui sont appliquées sur des objets 3D. Elles peuvent être utilisées :

  • pour ajouter des détails à un objet
  • pour lui donner une couleur
  • pour lui donner un aspect réaliste
  • ...

Importer une image

Il est possible d'importer n'importe quelle image.

  • Télécharger une image (au format carré) ou récupérer celle-ci.
  • Créer un dossier textures dans le dossier public
  • Ajouter l'image dans le dossier textures
import imageTexture from '/textures/rock.jpg'

Créer une texture

Pour créer une texture, on utilise la classe TextureLoader de Three.js.

import imageTexture from '/textures/color.jpg'
 
//...
 
// Textures
const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load(imageTexture);
colorTexture.colorSpace = THREE.SRGBColorSpace; // Couleurs plus naturelles
 
// Mesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ map: texture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh)

La taille doit etre une puissance de 2 (1024x1024, 512x512, 256x256, 128x128, 64x64, 32x32, 16x16, 8x8, 4x4, 2x2, 1x1)

Fond HDR

Ajoutons un fond d'écran HDR.

Trouver des fonds HDR.

Charger un fond HDR

  • Ajouter un dossier environmentMap dans le dossier public
  • Ajouter l'image 0.hdr dans le dossier environmentMap

Les images HDR sont assez lourdes (2-10mb).

/**
 * Environment map
 */
const rgbeLoader = new RGBELoader()
rgbeLoader.load('/textures/environmentMap/2k.hdr', (environmentMap) =>
{
    environmentMap.mapping = THREE.EquirectangularReflectionMapping
 
    scene.background = environmentMap
    scene.environment = environmentMap
})

Trouver des textures

Charger des textures

  • Créer un dossier wood dans le dossier public
  • Ajouter les textures suivantes
    • wood/ambientOcclusion.png
    • wood/normal.baseColor

Ajouter dans votre code

const textureLoader = new THREE.TextureLoader();
const ambientOcclusionTexture = textureLoader.load("/textures/wood/ambientOcclusion.png");
const baseColorTexture = textureLoader.load("/textures/wood/baseColor.png");
baseColorTexture.colorSpace = THREE.SRGBColorSpace; // Couleurs plus naturelles

MeshPhysicalMaterial

const material = new THREE.MeshPhysicalMaterial()

Ajouter du metalness et de la roughness

material.metalness = 0.45
material.roughness = 0.65

Metalness :

  • 0 : surface non métallique
  • 1 : surface très métallique

Rougness :

heightTexture

Height correspond à la hauteur de la texture.

 
// ...
 
const heightTexture = textureLoader.load("/textures/wood/height.png");
 
// ...
 
material.displacementMap = heightTexture
material.displacementScale = 0.1 // Hauteur de la texture

NormalTexture

Normal correspond aux détails. Les couleurs correspondent à la direction de la lumière. Les vertex ne sont pas déplacés.

const normalTexture = textureLoader.load("/textures/wood/normal.png");
 
// ...
 
material.normalMap = normalTexture
material.normalScale.set(0.5, 0.5)

Opacity

const opacityTexture = textureLoader.load("/textures/wood/opacity.png");
 
// ...
 
material.transparent = true
material.alphaMap = opacityTexture

Clearcoat

Clearcoat correspond à une couche supplémentaire de vernis.

material.clearcoat = 1
material.clearcoatRoughness = 0.5

Iridiscence

L'iridescence correspond à la couleur qui change en fonction de l'angle de vue. Comme un effet de halo multicolor.

material.iridescence = 1
material.iridescenceIOR = 1
material.iridescenceThicknessRange = [ 100, 800 ]

Transmission

La transmission correspond à la lumière qui traverse un objet.

material.transmission = 1
material.ior = 1.5
material.thickness = 0.5

Transparence

// Commenter le baseColorTexture
// material.map = baseColorTexture
 
// material.metalness = 0.45
// material.roughness = 0.65
 
material.metalness = 0
material.roughness = 0

Exemple :

Matcaps

AJouter un fichier matcap.png dans le dossier textures.

const material = new THREE.MeshMatcapMaterial()
material.matcap = matcapTexture
9 - Redimensionnement et plein écran11 Materials