Les lumières et les matériaux sont liés et interagissent entre eux. Pour l'instant ne n'avons pas eu besoin d'une source lumineuse pour voir notre materiel car MeshBasicMaterial affiche une couleur en aplat quoi qu'il arrive.

Lumière d'ambiance

Illuminons uniformémemnt notre scene avec une lumière globale: AmbientLight. Il y a 2 arguments, le premier pour la couleur et le second pour l'intensité (0 > 1+).

const globalLight = new THREE.AmbientLight( 0xffffff, 0.5 );
scene.add( globalLight );

Matériel réfléchissant

Pour que des lumières puissent avoir un impact sur notre scene, il faut des objets avec des surfaces réfléchissantes.

MeshPhongMaterial est un bon compromis entre réalisme et performance.

const material = new THREE.MeshPhongMaterial( {
  color: 'gold',
});

Lumière directionnelle

DirectionalLight est souvent utilisé pour imité la lumière venant du soleil, car elle projette des rayons de lumières parallèles. Comme l'AmbientLight, il y a 2 arguments: la couleur et l'intensité.

const sunLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( sunLight );

Light helper

DirectionalLightHelper permet de visualiser une lumière directionnel. Pour cela il suffit de lui passer une lumière et d'ensuite l'ajouter à la scene.

const sunLightHelper = new THREE.DirectionalLightHelper( sunLight );
scene.add( sunLightHelper );

Textures

Chargement

Avant de pouvoir utiliser une image (= texture) il faut la charger et la passer dans un matériel. Cela se fait en modifiant la propriété map de notre matériel.

	const material = new THREE.MeshBasicMaterial( { color: 'red' } );
  const loadTexture = () => {
    const loader = new THREE.TextureLoader();
    loader.load( 'path/to/image.jpg', ( texture ) => {
      material.map = texture;
    } );
  };

Texture & lumière

En remplaçant notre MeshBasicMaterial par un MeshPhongMaterial on pourra jouer avec la lumière et notre texture.

Bump &
displacement map

En utilisant la même image en noir et blanc, nous pouvons donner l'illusion de profondeur dans notre objet texture. Le bump donne l'illusion de texture via la lumière, tandis que le displacement map permet de déformer notre objet physiquement.

Three.js peut être très gourmant en perfomance. Surtout si on veut avoir un rendu réaliste (réflexion de la lumière, effet métallique, raytracing, etc.).

MeshStandardMaterial est un matériel conçu pour se rapprocher d'un rendu photo-réalistique mais qui a un coût.

À moins d'avoir une carte graphique dédiée à ce type de rendu, vous allez vite mettre à genoux la plus part des machines.

Une texture intelligente

MeshMatcapMaterial est un matériel spécial, il embarque une texture contenant de multiples informations pré-calculées.