Creer des animations avec Three.js

Introduction à la librairie

Three.js est une librairie JavaScript très populaire, elle est utilisée pour creer des animations 3D dans le navigateur avec de très bonnes perfomances, du faite de l'utilisation de la carte graphique pour les rendus, grâce à la WebGL.

Le code souce est entierement disponible gratuitement sur Github.

Cette librairie de haut niveau permettent de creer des animation 3D très complexe dans l'effort necéssaire pour une application equivalente traditionnelle.

Elements qui la compose

Three.js founis un ensemble d'éléments au programeur :

• La scène:
  élément dans lequel sera ajouté et supprimé des objets
• La caméra:
  contrôle la perspective du rendu de la scène
• La limière:
  lumière ambiante, directionnel, en point, en spot...
• Le matériel:
  la texture des objets
• Les géometrie:
  surface, cube, sphère...
• Les objet:
  l'assemblage du matériel et de la géométrie nous donne un objet
• Outils:
  veteur pour les position, matrice pour les formes ...
• Et bien d'autres !

Utilisation

Three.js s'intègre très facilement à notre projet en ajoutant un simple fichier JavaScript, inclue depuis un CDN ou en local sur son server.

HTML
    <script src="js/three.min.js"></script>
        

Il est ensuite possible de creer une scène en ajoutant une caméra à la scène, en créant un rendu WebGL et en l'ajoutant à notre page dans un élément du document.body.

JavaScript
    var camera, scene, renderer, geometry, material, mesh;
    
    init();
    animate();
    
    function init() {
        scene = new THREE.Scene();
        
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;
        
        geometry = new THREE.BoxGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
        
        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );
        
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        
        document.body.appendChild( renderer.domElement );
    }
    
    function animate() {
        requestAnimationFrame( animate );
        render();
    }
    
    function render() {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        
        renderer.render( scene, camera );
    }
    

Ce code permet d'obtenir un cube en rotation.