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 :

Quelles sont les fonctionnalités de Three. js ?

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 fonctionne Three. js ?

Pour comprendre un peu mieux Three. js je vais vous montrer comment animer un cube en 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/.