« Modèle:Premier cube » : différence entre les versions
| Ligne 82 : | Ligne 82 : | ||
====Créer le cube==== | ====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==== | ====Faire un rendu de la scène==== | ||
====Animer le cube==== | ====Animer le cube==== | ||
Version du 21 janvier 2018 à 17:32
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.