Want more ?

Comment ?

On sait déjà comment manipuler des pixels dans un context en 2D :

	  const canvas = document.createElement( 'canvas' ),
          ctx = canvas.getContext( '2d' );

Mais si on se voulait du mal, on pourrait utiliser un contexte 3D:

	const ctx = canvas.getContext( 'webgl2' );

Contrairement à un contexte en 2D, coder dans un contexte en 3D peut être très compliqué sans notions approfondies de WebGL et GLSL.

Three.js

Se tenir à jour

Cette librairie évolue constamment, il est toujours bon de savoir où regarder pour voir les derniers changements.

Hello³

Prérequis

• Moteur de rendu
• Au moins une caméra
• Une scene
• Un objet 3d
• Du courage (ça va bien se passer)

Installation

Il existe plusieurs façon d'importer three.js à votre projet, mais cela dépend en partie de votre workflow. La recommandation est de passer par un import depuis npm, et d'utiliser un bundler (webpack, esbuild, rollup, etc.).

Codepen

Pour nous faciliter la tâche on va commencer sur codepen, nous reviendrons sur l'installation pour le projet ultérieurement.

WebGL Renderer

La première étape est de mettre en place le moteur de rendu. Ce dernier calculera comment afficher nos objets en 3D. Par défaut il crée une balise canvas, mais on peut aussi lui en fournir une existante pour plus de flexibilité.

Camera

Sans caméra pas de rendu. Il existe plusieurs types de caméras, la plus utilisée et celle qui se rapproche le plus de l'œil humain: la PerspectiveCamera.

Perspective Camera

const camera = new THREE.PerspectiveCamera( verticalFov, aspectRatio, near, far );

Scene

Il nous manque un endroit où placer nos objets 3D: une Scene.

Avec la méthode add on va pouvoir y ajouter nos éléments (objets 3d, cameras, lumières, etc.).

const scene = new THREE.Scene();
scene.add( camera );

Coordonnées

Par défaut, chaque élément créé (camera, objet 3D, etc.) se positionne au centre d'une scene (x: 0, y: 0, z :0). Les valeurs n'ont pas d'unité, c'est à vous de créer une échelle de valeur de sorte que votre scene soit crédible.

Premier rendu

Pour lancer un rendu de votre scene, il faut appeler la méthode render de notre renderer. Il faut lui passer 2 arguments: la scene à rendre et la caméra active.

renderer.render( scene, camera );

Le fond noir prouve que notre setup fonctionne. Pour le moment, la caméra ne voir rien à afficher et donc afficher la couleur de fond par défaut.

Mesh

Un objet en 3d est appelé Mesh, il est composé d'une forme (geometry) et d'une apparence (material).

Geometry

Créons un cube de taille 1 avec la méthode BoxGeometry:

const geometrie = new THREE.BoxGeometry( 1, 1, 1 );

Material

Avec la méthode MeshBasicMaterial nous pouvons définir une apparence simple et sans gestion de lumière pour notre géométrie:

const material = new THREE.MeshBasicMaterial(
  {
    color: 'gold'

    // Si true, permet de voir uniquement
    // les arêtes de notre forme.
    wireframe: false
  }
);

Fuuuuuusion

Une fois qu'on a défini la forme et l'aspect de notre objet, nous allons les combiner pour lui donner vie avec la méthode Mesh.

const geomtry = […],
      material = […],
      mesh = new THREE.Mesh( geometry, material );

// on ajoute notre objet dans la scene
scene.add( mesh );

Une dernière chose: notre camera se situe en {x:0, y: 0, z: 0}, comme notre cube. Reculons là pour enfin voir quelque chose.

camera.position.z = 5;

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.