Modèle:Premier cube
Organisation des dossiers et fichiers
Fichier Index.html
C'est le fichier qui sera afficher 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/ de 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.
Exemple de code HTML de base pour afficher un cube avec Three.js : <source lang='html5'> <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Ma première application Three.js</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script src="js/script.js"></script> </body> </html> </source>
Code javascript
Le code
| <source lang = 'javascript'>
//Création de la Scène var scene = new THREE.Scene(); //Création de la caméra var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); //Création du renderer var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); //Création du cube 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 pour animer la scène function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } //Lancement de l'animation animate(); </source> |
Spécial:IframePage/Cube |
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 :
<source lang ='javascript'> camera.position.z = 5; </source>
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 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). <source lang ='javascript'> function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate(); </source>
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).