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 HTLM5 sans avoir besoin d'un plugin. Le code source est hébergé sur le 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 Github de mrDoob.
Pour les tests
Les navigateurs qui supportent WebGl sont:
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 (création dynamique) 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 en fonction de votre système d'exploitation.
Trois objets pour tout affichage utilisant Three.js
Une SCENE
- Définition : La SCENE 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 :
var scene = new THREE.Scene();
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
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
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 :
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
- Pour commencer, on va créer un WebGLRenderer. Three.js propose d'autres renderers 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 :
renderer.setSize( window.innerWidth, window.innerHeight,false );
- 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 :
var renderer = new THREE.WebGLRenderer({alpha: true});
Afficher un cube
Organisation des dossiers et fichiers
Fichier Index.html
C'est le fichier qui sera affiché dans le navigateur. Il contient :
- Le code HTML de la page,
- Le style CSS ou le lien vers la feuille de style .css,
- Les liens vers les fichiers javascript qui sont placés tout deux dans un sous dossier js/ à la racine du site. On peut organiser le site différemment, conserver la fichier three.js dans l'archive Three.js pour simplifier les mises à jours avec git.
- Le fichier three.js de la bibliothèque Three.js,
- Le fichier script.js où on va écrire le code javascript pour afficher le cube.
index.html
Exemple de code HTML de base pour afficher un cube avec Three.js :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="css/style.css">
<title>Ma première application Three.js</title>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Code javascript
script.js
//Créer une Scène
var scene = new THREE.Scene();
//Créer une caméra
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//Créer un renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Créer le cube et le placer dans la scène
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
//Positionnement de la caméra
camera.position.z = 5;
//Fonction : boucle d'animation
function animate()
{
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
//Lancement de l'animation
animate();
|
Analyse du code javascript
Scène caméra et renderer
- Nous avons déjà vu ici le code de la Scène, de la caméra et du renderer.
- On avance la caméra de 5 unités avec le code :
camera.position.z = 5;
Créer le cube
- Pour créer un cube on utilise BoxGeometry, c'est un objet qui contient tous les vertices et les faces du cube.
- On a aussi besoin d'un matériel pour colorier le cube. Three.js propose plusieurs matériaux. Pour l'instant on va utiliser MeshBasicMaterial. On attribue une couleur à ce matériel. La couleur marche comme pour le CSS.
- Le Mesh est un objet qui prend une geometrie et qui lui applique un matériel. On ajoute le mesh à la scène.
- Quand on ajouter simplement un Mesh avec scene.add() le Mesh et la caméra sont l'un sur l'autre. On déplace légèrement la caméra.
Faire un rendu de la scène
À ce point, si on essaie d'afficher la page HTML dans le navigateur, on ne verra rien, parce que rien n'est rendu.
Pour faire cela il faut appeler un render() ou une boucle d'animation (une animate loop).
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
Cela créer une boucle qui fait que le renderer est dessiné chaque fois que l'écran est rafraîchi (normalement 60 fois par seconde).
Animer le cube
On ajoute ces lignes juste avant renderer.render dans la fonction animate pour définir les rotations .
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
Ces lignes seront exécutées 60 fois par seconde pour donner une rotation du cube.
Tout ce qui se déplace dans la scène doit être généré dans la boucle. On peut ajouter des appels de fonction dans la fonction animate pour réduire le nombre de lignes.