Du web, de la 3D, c’est THREE JS

three js

THREE JS c’est une librairie Javascript qui vous permet de faire très simplement de la 3D sur une page web et de l’animer.
Pour commencer ce tutoriel, il faut avoir des notions en javascript basique (variables, fonctions…), et aussi une petite notion de 3D (Camera, mesh, light…).

Introduction à la 3D sur navigateur

La scène 3D

Avant tout il faut savoir ce qu’est une scène 3D, une scène 3D basique se compose:

  • La camera, c’est votre point de vue.
  • Un mesh c’est un objet 3D, cela va du simple cube, au un personnage composer de milliers de polygones.
  • Une light, ou lumière qui vous permet de voir le mesh et surtout de pouvoir agir sur les ombres ou l’ambiance.

la 3D dans le navigateur

Vous avez surement remarquez que sur les sites très orienté web design il y a de plus en plus de 3D, nous pouvons aussi jouer sur navigateur web à des 3D bluffant.
C’est grâce à une technologie déjà présente dans vous navigateur, c’est WEBGL.
WEBGL permet d’afficher et gérer des formes 3D en temps réel directement dans votre navigateur web.
Gardez cependant à l’esprit que c’est une technologie asses récente, et a moins d’avoir un PC de la nasa les calcules de l’espaces 3D risquent d’être très long si votre projet est complexe.

La mise en place de THREE JS

il vous faut avant tout télécharger cette librairie sur le site http://threejs.org/

Nous allons pour ce tutoriel une architecture Web classique avec un fichier index.html , un style.css, un script.js et un dossier librairie pour y mettre les 2 fichiers dons nous avons besoin pour ce tutoriel three.js et three.min.js (ces 2 fichiers se trouvent dans le dossier build de votre téléchargement).

Pour le fichier index.html nous utiliserons un code simple il ne faut juste pas oublier de lier les fichier style.css, threejs.min.js, et votre fichier script.js en bas du body.

Ceci ne demande pas beaucoup de temps et pareil pour le fichier style.css lui aussi très simple, tout à 100% sans marges, après c’est vous qui adapter suivant vos projets.

Mettre en place la Scène 3D

Pour mettre en place la scène 3D il faut le déclaré et placer sa camera. Ce sera le cas sur tout vos projets THREE JS.
Pour la camera nous allons utiliser la camera de perspective car c’est la représentation la plus courante de la 3D (en opposition à la camera orthogonale ) . la camera prend plusieurs paramètres :

  • La « qualité ».
  • La taille.
  • La distance minimum et maximum de la vision.

Dans script.js nous allons noter.

L’affichage d’une scène 3D s’appel un rendu (ou render ) il faut donc dire au navigateur qu’il faut utiliser WEBGL  pour voir ce rendu.

Et nous allons donc crée une fonction qui vas nous permettre d’afficher ce rendu 3D sur la page.
Dans votre script.js positionner cette fonction en pied de page.

Votre scène est prête, il n’y a plus qu’a positionner vos objets.

Le mesh et la lumière

Nous allons crée de simple forme géométrique pour ce tutoriel mais vous pouvez aussi y importer des modèle 3D plus complexe.

Pour crée un mesh

Avec TREE JS nous pouvons créer des forme géométrique basique tel que des cubes, des sphères des torus… grâce des fonctions pré défini par la librairie pour crée un cube. Il vous faut noter 2 information principal.
La géométrie de la forme (pour l’exemple le cube) qui prend en paramètre ses dimensions (longueur largeur et profondeur) .
La couleur et le shader.  Pour ceux qui n’on jamais fais de 3D, le shader c’est la manière dont votre matériel réfléchie la lumière, et prend en paramètre principal la couleur en hexadécimal.
Vous pouvez alors inclure le cube dans la scène avec un simple « .add ».
la fonction « scene.add  » ça sert a choisir a quel element le cube sera attaché, si vous voulez un nouveau cube tournant autour de celui ci vous pourrez utiliser un « cub.add() ».

Que la lumière soit…

Pour que votre scène soit visible il vous faut l’éclairer.
Le système reste le même que pour la création d’objet,, vous avez accès à plusieurs modes d’éclairage qui peuvent être additionné, coloré comme vous le souhaitez.
Les 3 principales source des lumière sont:

  • La lumière ambiante qui éclaire toute la scène .AmbientLight
  • Le point de lumière qui éclaire à la manière d’une sphère lumineuse .PointLight
  • Le Spot qui éclaire la scène en forme de cône .SpotLight

la déclaration et positionnement  de la lumière ce fait de cette manière :

Positionner les éléments

Comme dans l’exemple précédant vous avez remarquer la fonction monObjet.position.set(x,y,z);
sert à positionner ses objets (lumière, mesh, camera).
Pour la rotation c’est aussi simple:
monObjet.rotation.set(x,y,z);
Pour s’aider à positionner ses objet vous pouvez faire apparaître un guide 3D bien utile pour se repérer.

A vous de jouer

Vous savez maintenant faire une scène 3D basique en THREE JS.
Pour animer il vous suffit t’utiliser « translate » et « rotation ».
Vous avez maintenant les base a vous, maintenant de vous exercer, il y a encore beaucoup de choses à expérimenter , importer un model 3D plus complexe , utiliser un système de particule, utiliser les événement clavier et souris …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *