👟 🤾🏾 💵 Introduction à la 3D: principes de base de Three.js 🤙🏽 🧒 👨‍✈️

La complexité du Web change chaque jour et ses capacités augmentent tout aussi rapidement, en particulier avec le rendu 3D. Qui commence à peine à rejoindre le thème 3D - bienvenue au chat.

Allons de loin

WebGL est une bibliothèque de logiciels pour JavaScript qui vous permet de créer des graphiques 3D qui fonctionnent dans les navigateurs. Cette bibliothèque est basée sur l'architecture de la bibliothèque OpenGL. WebGL utilise le langage de programmation de shader GLSL , qui a une syntaxe de type C. WebGL est intéressant en ce que le code est modélisé directement dans le navigateur. Pour cela, WebGL utilise l'objet canevas introduit en HTML5.

Travailler avec WebGL, et avec les shaders en particulier, est un processus assez long. Dans le processus de développement, il est nécessaire de décrire chaque point, ligne, face, etc. Afin de visualiser tout cela, nous devons enregistrer un morceau de code assez volumineux. Pour augmenter la vitesse de développement, la bibliothèque Three.js a été développée .

Three.js est une bibliothèque JavaScript contenant un ensemble de classes prédéfinies pour créer et afficher des graphiques 3D interactifs dans WebGL.

Three.js pour WebGL est identique à jQuery pour JavaScript. La bibliothèque propose une syntaxe déclarative et des résumés des maux de tête associés à la 3D dans le navigateur. Prenons un aperçu général et voyons comment commencer si vous êtes nouveau dans le monde 3D.

Plus sur Three.js

La bibliothèque Three.js, comme déjà mentionné, facilite le travail avec WebGL. Lors de l'utilisation de Three.js, il n'est pas nécessaire d'écrire des shaders (mais la possibilité demeure), et il devient possible d'opérer sur des concepts familiers.

Un grand nombre de développeurs travaillent sur la bibliothèque. L'idéologue et développeur principal est Ricardo Cobello, connu sous le pseudonyme créatif Mr.Doob .

La modélisation de graphiques à l'aide de Three.js peut être comparée à l'ensemble, car nous avons la possibilité de travailler avec des concepts tels que la scène, la lumière, la caméra, les objets et leurs matériaux.

Trois soi-disant baleines Three.js comprennent:

Scène - une sorte de plate-forme où tous les objets que nous créons sont placés;
Appareil photo - en fait - c'est «l'œil» qui sera dirigé vers la scène. La caméra prend et affiche des objets qui se trouvent sur la scène;
Renderer - un visualiseur qui vous permet d'afficher une scène capturée par la caméra.

Three.js dispose de plusieurs types de caméras:

Caméra perspective
Caméra stéréo
Caméra orthographique
Caméra Cube

Les plus courantes sont la caméra en perspective et la caméra orthographique.

Caméra perspective

Il s'agit du mode de projection le plus couramment utilisé pour rendre une scène 3D.

La caméra en perspective est conçue pour simuler ce que l'œil humain voit. La caméra perçoit tous les objets dans une projection en perspective, c'est-à-dire que plus l'objet est éloigné de nous, plus il semble petit.

La caméra en perspective prend 4 arguments:

FOV Field Of View (/ ) — , .
Aspect ratio — , , . . , , .
Near & Far — , . , , , .

Orthographic Camera

Dans ce mode de projection, la taille de l'objet dans l'image affichée reste constante, quelle que soit sa distance par rapport à la caméra. C'est-à-dire qu'il s'agit d'une caméra distante à une distance infinie des objets.

Dans ce cas, toutes les lignes perpendiculaires restent perpendiculaires, toutes parallèles - parallèles. Si nous bougeons la caméra, les lignes et les objets ne seront pas déformés.

Cela peut être utile lors de l'affichage de scènes 2D et d'éléments d'interface utilisateur.

Éclairage

Sans éclairage sur la scène, vous aurez l'impression d'être dans une pièce sombre. De plus, en éclairant la scène, vous pouvez donner un plus grand réalisme. Techniquement, chaque éclairage peut être réglé en couleur.

Exemples d'éclairage:

Ambient Light — , ; , .
Directional Light — , . , , , , ; , .
Point Light — , . ( ).
Spot Light - cette lumière est émise d'un point dans une direction, le long d'un cône, se dilatant à mesure que vous vous éloignez de la source de lumière.

Création d'objets sur scène

L'objet créé sur scène s'appelle Mesh.

Le maillage est une classe qui représente des objets basés sur un maillage polygonal triangulaire.

Cette classe prend 2 arguments:

Géométrie - décrit la forme (position des sommets, faces, rayon, etc.)
Matériau - décrit l'apparence des objets (couleur, texture, transparence, etc.)

Essayons de créer 2 formes simples: un cube et une sphère.

Tout d'abord, allez sur le site three.js , téléchargez la dernière version de la bibliothèque. Ensuite, nous connectons la bibliothèque dans la section head ou au début de la section body de notre document, et vous avez terminé:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>First Three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
      </style>
  </head>
  <body>
    <script src="js/three.js"></script>
    <script>
      //  Javascript .
    </script>
  </body>
</html>

De plus, pour que nous puissions afficher l'objet créé, il est nécessaire de créer une scène, d'ajouter une caméra et de configurer le rendu.

Ajouter une scène:

var scene = new THREE.Scene();

Ajouter une caméra en perspective:

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

La caméra prend 4 paramètres, qui ont été mentionnés ci-dessus:

angle de vue ou FOV, dans notre cas c'est un angle standard de 75;
le deuxième paramètre est le rapport d'aspect ou le rapport d'aspect;
les troisième et quatrième paramètres sont la distance minimale et maximale de la caméra, qui tombera dans le rendu.

Ajoutez et configurez le rendu:

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Ce que nous avons fait: créez d'abord un objet de rendu, puis définissez sa taille en fonction de la taille de la zone visible, puis ajoutez-le à la page pour créer un élément de canevas vide avec lequel nous travaillerons.

Après avoir créé le rendu, nous indiquons où afficher la balise canvas . Dans notre cas, nous l'avons ajouté à la balise body .

Pour créer le cube lui-même, nous avons d'abord défini la géométrie:

var geometry = new THREE.BoxGeometry( 10, 10, 10);

Un cube est créé à l'aide de la classe BoxGeometry . Il s'agit d'une classe qui contient les sommets et les faces d'un cube. Nous transférons les tailles:

largeur : largeur du cube, taille des côtés le long de l'axe x
hauteur : hauteur du cube, c'est-à-dire taille côté y
profondeur : profondeur du cube, c'est-à-dire dimension latérale sur l'axe Z

Pour colorer le cube, définissez le matériau:

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

Dans notre cas, MeshBasicMaterial est défini et le paramètre de couleur 0x00ff00 est transmis , c'est-à-dire couleur verte. Ce matériau est essentiellement utilisé pour donner à la figure une couleur uniforme. L'inconvénient est que le chiffre disparaît en profondeur. Mais ce matériau est très utile lors du rendu d'images filaires à l'aide du paramètre {wireframe: true} .

Maintenant, nous avons besoin d'un objet Mesh qui prend la géométrie et lui applique des matériaux:

var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 25;

Nous ajoutons un maillage à la scène et déplaçons la caméra car tous les objets après la méthode scene.add () sont ajoutés par défaut avec les coordonnées (0,0,0), grâce auxquelles la caméra et le cube seront au même point.

Afin d'animer le cube, nous devons tout dessiner à l'intérieur de la boucle de rendu à l'aide de requestAnimationFrame :

function render() {
        requestAnimationFrame( render );
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;      
  renderer.render( scene, camera );
}
render();

requestAnimationFrame est une demande au navigateur que vous souhaitez animer quelque chose. Nous lui passons une fonction à appeler, c'est-à-dire la fonction render ().

Ici, nous définissons les paramètres de la vitesse de rotation. En conséquence, la boucle rend notre scène 60 fois par seconde et fait tourner le cube.

Maintenant, dessinons une sphère:

var geometry = new THREE.SphereGeometry(1, 32, 32);

Pour construire une sphère, la classe SphereGeometry est utilisée , qui prend en charge:

rayon (la valeur par défaut est 1)
widthSegments - le nombre de segments horizontaux (triangles). La valeur minimale est 3, la valeur par défaut est 8
heightSegments - le nombre de segments verticaux. La valeur minimale est 2, la valeur par défaut est 6

Soit dit en passant, plus vous spécifiez le nombre de triangles, plus la surface de la sphère sera lisse.

Ensuite, nous essayons d'utiliser un autre matériau - MeshNormalMaterial - un matériau multicolore qui compare les vecteurs normaux en couleurs RVB:

var material = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
camera.position.z = 3;

Il existe de nombreux types de matériaux. Certains matériaux peuvent être combinés et appliqués simultanément à une figure. En savoir plus ici .

La dernière étape consiste à définir le cycle de rendu:

function render() {
	requestAnimationFrame( render );
	sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render( scene, camera );
}
render();

Et nous obtenons ce qui suit:

Essayons de créer une figure plus complexe et appliquons un matériau plus complexe.

À titre d'exemple, prenons le matériau MeshPhongMaterial , qui prend en compte l'illumination. Par conséquent, nous devons d'abord ajouter un peu de lumière à la scène. Ci-dessous, nous ajoutons un SpotLight avec une teinte jaune et définissons sa position sur l'axe des coordonnées:

var scene = new THREE.Scene();
var spotLight = new THREE.SpotLight(0xeeeece);
spotLight.position.set(1000, 1000, 1000);
scene.add(spotLight);
var spotLight2 = new THREE.SpotLight(0xffffff);
spotLight2.position.set( -200, -200, -200);
scene.add(spotLight2);

SpotLight , comme mentionné ci-dessus, rayonne d'un point dans une direction, le long d'un cône, se dilatant lorsque vous vous éloignez de la source de lumière. En plus de la couleur, la lumière spot peut prendre des arguments: intensité, distance, angle, pénombre, décroissance et aussi ombres projetées.

Vous pouvez lire sur d'autres types de lumière et leurs capacités ici .

Définissez maintenant la forme elle-même:

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

La classe TorusGeometry est conçue pour construire des tori ou des «rouleaux». Cette classe prend les paramètres suivants:

rayon, la valeur par défaut est 1;
diamètre du tuyau, par défaut 0,4;
radialSegments ou le nombre de segments triangulaires, par défaut à 8;
tubularSegments ou nombre de segments de face, la valeur par défaut est 6

Ajouter du matériel:

var material = new THREE.MeshPhongMaterial( {
color: 0xdaa520,
specular: 0xbcbcbc,
 } );

Ce matériau est destiné aux surfaces brillantes. Nous lui donnons une couleur dorée et lui ajoutons une propriété spéculaire qui affecte le lustre du matériau et sa couleur. La couleur par défaut est 0x111111 - gris foncé.

Rendu, et voici ce que nous avons fini avec:

Un peu plus sur les fonctionnalités de Three.js

Pour inclure Three.js dans un projet, il vous suffit d'exécuter npm install three .

Si vous combinez des fichiers à l'aide de Webpack ou de Browserify , qui vous permettent d'implémenter require ('modules') dans le navigateur, en combinant toutes vos dépendances, vous avez la possibilité d'importer le module dans vos fichiers source et de continuer à l'utiliser en mode normal:

var THREE = require('three');

var scene = new THREE.Scene();
...

Il est également possible d'utiliser l' importation de syntaxe ES6 :

import * as THREE from 'three';

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

Ou, si vous souhaitez importer uniquement certaines parties de la bibliothèque Three.js, par exemple Scene :

import { Scene } from 'three';

const scene = new Scene();
...

Conclusion

À l'aide de près de quelques lignes de code, nous avons créé 2 formes simples, et l'une est un peu plus compliquée. Naturellement, Three.js a beaucoup plus de fonctionnalités. Three.js a beaucoup de formes à l'intérieur de la boîte, des matériaux, des types d'éclairage, etc. Ce n'est qu'une petite partie des bases.

La bibliothèque Three.js vous permet de créer et de créer des choses vraiment saines. Voici quelques exemples collants:

Exemple 1
Exemple 2
Exemple 3

Si vous voulez commencer à apprendre la 3D en JavaScript, vous pouvez trouver tout ce dont vous avez besoin ici ou ici .

Introduction à la 3D: principes de base de Three.js