Modèle:Premier cube

De OSWiki
Aller à la navigation Aller à la recherche

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.

Créer le cube

Faire un rendu de la scène

Animer le cube