Debuter avec three.js

Three.js est une bibliothèque JavaScript pour créer des scènes 3D dans un navigateur web. Elle peut être utilisée avec la balise canvas du HTML5 sans avoir besoin d'un plugin. Le code source est hébergé sur le [ https://github.com/mrdoob/three.js/ compte GitHub de son créateur mrDoob].

Pré-requis

Les connaissances

Pour aborder Three.js vous devez avoir quelques compétences en :

• HTML : https://developer.mozilla.org/fr/docs/Web/HTML
• CSS : https://developer.mozilla.org/fr/docs/Web/CSS
• Javascripts : https://developer.mozilla.org/fr/docs/Web/JavaScript

Three.js

Pour télécharger les bibliothèques Javascript de Three.js rendez vous sur la page officiel de Three.js, ou sur le compte [ https://github.com/mrdoob/three.js/ Github de mrDoob.]

Pour les tests

Le navigateur

Navigateurs qui supportent WebGl : Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge.

Certaines fonctionnalités utilisées par Three.js peuvent nécessiter des polyfills.

Serveur Web

Si vous n'utilisez que des géométries procédurales et ne chargez pas de textures, les pages Web devraient fonctionner directement depuis le système de fichiers, il suffit de double-cliquer sur le fichier HTML dans un gestionnaire de fichiers et il devrait apparaître dans le navigateur (vous verrez le fichier: ///votreFile. html dans la barre d'adresse).

Pour d'autres utilisations, il faudra installer un serveur Web comme Apache en local ou sur un serveur distant.

Vous trouverez plus d'informations en anglais sur cette page : https://threejs.org/docs/#manual/introduction/How-to-run-thing-locally

Vous trouverez des tutoriels sur internet pour installer un serveur Web pour votre système d'exploitation.

Trois objets pour tout affichage utilisant Three.js

Une SCENE

• Définition : C'est l'espace 3D dans lequel seront placés les objets, les caméras et l'éclairage. Elle peut avoir n'importe quelles dimensions, tout dépend des besoins.

• Code javascript pour créer une nouvelle scène :

<source lang ='javascript'> var scene = new THREE.Scene(); </source>

Une CAMERA

Il existe plusieurs types de caméra dans three.js, ici on va commencer par utiliser une PerspectiveCamera.

• premier argument : le champs de vue : FOV est l'étendu de la scène affichée à tout moment, cette valeur est exprimée en degrés.
• deuxième argument : aspect ratio, ici largeur/hauteur de la fenêtre.
• les deux derniers arguments sont respectivement le point le plus proche et le point le plus éloignés vus dans la scènes. Au delà rien n'est affiché.

Exemple de code pour créer une caméra <source lang = 'javascript'> var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); </source>

Un RENDERER

Le renderer est en fait l'espace où nous allons pouvoir dessiner, écrire. J'ai aussi trouvé comme traduction, moteur de rendu. Mais, la première définition est plus parlante.

Exemple de code Javascript pour créer un Renderer : <source lang = 'javascript'> var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); </source>

• Pour commencer, on va créer un WebGLRenderer. Three.js propose d'autres renderer pour les anciens navigateurs et pour ceux qui ne supportent pas WebGL.
• Pour définir la largeur et la hauteur de l'espace rendu par l'application, on utilise window.innerWidth et window.innerHeight ou des fractions de ces valeurs.
• Pour utiliser une plus faible définition on ajoute false en paramètre à la fonction comme ceci :

<source lang='javascript'> renderer.setSize( window.innerWidth, window.innerHeight,false ); </source>

• Pour finir on ajoute l'élement renderer au document HTML. Le renderer utilise un élement <canvas> pour afficher la scène.
• On peut ajouter un paramètre alpha pour rendre le fond des objets tranparents :

<source lang='javascript'> var renderer = new THREE.WebGLRenderer({alpha: true}); </source>