Three.js

3DThree.js est une bibliothèque Javascript qui permet de gérer et créer des objets en 3D à partir du navigateur Web, soit à partir de WebGL (selon compatibilité) soit à l'aide de <canvas>.

Dans cet article, nous allons voir comment obtenir un cube en 3D qui tourne sur lui même, sans notion ni de 3D ni de JS.

L'essentiel

On réalise d'abord un bout de code html pour pouvoir accueillir le reste.

<!doctype html>
<html>
 <head>
  <title>Mon premier rendu 3D avec Three.js</title>
  <meta charset="utf-8">
  <link  href="css/main.css" rel="stylesheet"/>
 </head>
<body>
  <div id="container"></div>
  <script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
  <script type="text/javascript">
   <!-- C'est ici que nous utiliserons Three.js -->
  </script>
</body>
</html>

Comment ça fonctionne?

Tout d'abord, vous devez lier un fichier .js à votre document. Deux méthodes possibles, soit par local, soit à distance. Nous utiliserons ici à distance, via ce code :   

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>

Ensuite, il nous faut le bout de code qui va permettre d'afficher avec Three.js. Ce code fournit trois choses : une scène, une caméra, et un moteur de rendu.

 

var renderer, scene, camera, mesh;

init();

function init(){
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.getElementById('container').appendChild(renderer.domElement);
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set(0, 0, 1000)
    scene.add(camera);
}

                Maintenant qu'on a notre moteur de rendu prêt, il manque le cube que je vous avais promis au début. Patience ça vient.

Pour faire ce fameux cube, on a besoin d'un "objet" appelé CubeGeometry. Cet objet contient les points et es faces du cube. En plus, il nous faut un "matériel", pour pouvoir le colorer. On prendra ici le matériel le plus simple, et on applique une couleur bleue.  Enfin, il nous faut un dernier objet, qui permet lui de rassembler les deux premiers, un Mesh. On obtient ce code :

var geometry = new THREE.CubeGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

scene.add() est là pour ajouter ce que nous venons de faire aux coordonnées (0, 0, 0). C'est pourquoi on décale un peu la caméra avec la ligne qui suit.

Après tout ce code, il nous manque une toute petite chose pour pouvoir voir le cube. On appelle ça un "render loop", ou plutôt boucle de rendu. Le code suivant dit au moteur de rendu de dessiner la scène 60 fois par seconde. On aurait put définir un intervalle, mais requestAnimationFrame permet d'économiser la puissance, car l'animation s'arrête lorsque l'utilisateur navigue sur un autre onglet.

Nous l'intégrons dans la fonction d'animation du cube :

function animate(){
   requestAnimationFrame( animate );
   mesh.rotation.x += 0.01;
   mesh.rotation.y += 0.02;
   renderer.render( scene, camera );

}

Et si tout s'est bien passé, vous avez maintenant un cube bleu qui tourne dans votre navigateur.


Divertissement

Ca vous a plu? Je vous invite alors à visiter ce lien pour voir ou tester des jeux, ou pages faites avec Three.js, c'est très impressionnant. Amusez-vous bien.

Laisser un commentaire