Mise en place

Jouer avec codepen c'est cool pour tester des bouts de codes sans devoir considérer tout les à-côtés. Nous allons voir comment mettre en place three.js dans un projet web, qui peut être mis en ligne.

Structure

• index.html
• js/main.js
• css/reset.css
• css/main.css
• assets/

Html

L'HTML reste simple, avec la balise head qui contiendra les bases des métadonnées et nos fichiers .css & .js. La petite sutbilité est le type="module" de notre balise script qui permet d'utiliser import dans notre javascript.

Le body reste basique, notons les classes écritent en BEM et que nous englobons notre canvas dans une div.canvas__wrapper qui nous servira de réceptacle sur lequel on se basera pour gérer la taille de notre canvas.

CSS

Les styles sont minimes, un reset.css pour éviter les styles par défaut et un main.css qui contient uniquement la taille et le comportement de notre canvas dans la page.

Imports

Les 2 premières lignes importent des scripts externes. Dans notre cas, nous aurons besoin de Three.js et de Tweakpane.

Variables

Nous allons avoir besoin de stocker certaines informations avec 2 objets :

• settings : contient les données générales.
• threejsOptions : contient les options à passer à la construction de moteur de rendu WebGLRenderer.

Class Viewer

Cette classe va gérer tout les aspects de notre canvas Three.js via des méthodes (=fonctions) :

• contructor
• setRenderer
• render
• populate
• resize

Appels &
évènements

La dernière partie s'occupe de créer l'instance de notre class Viewer et d'ajouter un évènement resize pour s'assurer que le canvas reste aux bonnes dimensions.

Viewer

constructor

Une class en javascript doit avoir la méthode constructor définie pour être valide et fonctionner. Cette fonction est appelé via le mot clé new et permet d'indiquer comment l'instance est créée.

Ici nous allons simplement stocker le canvas dans la propriété canvas de notre instance et appeler la méthode setRenderer( ) avec nos options.

setRenderer

Gère la mise en place de notre moteur de rendu, de la camera et de la scene. Les fonctions resize( ) et populate( ) sont appelées ensuite.

render

Cette méthode rend plus facile l'appel d'un rendu en passant la scene et la camera, préalablement créées, directement dans la fonction render du moteur de rendu.

populate

La fonction qui gère l'ajout de contenu dans notre scene, et appele la méthode render( ) de notre instance :

resize

S'occupe de redimmensionner le canvas via le moteur de rendu, de changer son aspect-ratio et mettre à jour la caméra. Cette fonction sera appelée par l'évènement resize du window à la fin du fichier main.js.

Les fichiers

Codepen