Three. js est une librairie JavaScript qui facilite l’implémentation de graphiques 3D dans les navigateurs Web. Initialement développé par Ricardo Cabello, la communauté de développeurs compte aujourd’hui plus de 250 contributeurs. Le code source de la librairie est librement accessible sur GitHub https://github.com/mrdoob/three.js/. Je vous conseille vivement de consulter cette vidéo de l’auteur, il y fait une superbe présentation :

Fonctionnalités

Three. js accélère le développement de rendu en 3 dimension grâce à ses fonctionnalités avancées. Pour en citer quelques unes :

    • Support des Canvas, SVG et WebGL
    • Ajout/suppression d’objets à la volée
    • Le fogging
    • Les cameras
    • Gestion des animation
    • Gestion des lumières
    • Chargement des données en entrée sous plusieurs formats : binaire, image, JSON et scène
  • Un ensemble de fonctions mathématiques pour la manipulation des données
  • Et plein d’autres …

Comment çà marche

Pour comprendre un peu mieux Three. js je vais vous montrer comment animer un cube en 3D.

cube 3D

En premier vous devez inclure le fichier Three. js dans via une balise “script” »

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
Ensuite vous devez implémenter trois fonctions, qui sont en fait les fonctions que l’on retrouve dans tout projet d’animation 3D :
  • init () = initialisation de la scène et caméra
  • animate () = implémentation l’animation à jouer
  • onWindowResize () = conserve une comportement correcte de l’animation même si la taille fenêtre est modifiée

Implémentation de la fonction init () :

function init() {

//Construction de l'environnement
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//Définition d'un cube de dimension 200px
var geometry = new THREE.BoxGeometry( 200, 200, 200 );

//Chargement de la texture
THREE.ImageUtils.crossOrigin = 'anonymous';
var texture = THREE.ImageUtils.loadTexture( 'https://s3-eu-west-1.amazonaws.com/softfluent/logo_softfluent.png' );
var material = new THREE.MeshBasicMaterial( { map: texture } );

//Mise en place de la texture sur le cube
mesh = new THREE.Mesh( geometry, material );

//Ajout du cube avec sa texture à la scène
scene.add( mesh );


window.addEventListener( 'resize', onWindowResize, false );

}

Rotation du cube sur deux axes x et y via la fonction animate () :

function animate() {

//Définition de la rotation sur deux axes x et y
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );

}

Gestion du redimensionnement de la fenêtre avec onWindowResize () :

function onWindowResize() {

//Recalcul de l'animation en fonction des nouvelles dimensions de la fenêtre
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );

}

Résultat

Conclusion

Three. js est une librairie intéressante qui facilite grandement le développement 3D full JavaScript. Sa documentation est très fournie et régulièrement mise à jour, on appréciera aussi la communauté d’utilisateurs qui se développe rapidement.

Si vous voulez en savoir plus allez vite sur http://threejs.org/.

Ne ratez plus aucunes actualités avec la newsletter mensuelle de SoftFluent