Three.js
Cet article est une ébauche concernant l’informatique.
Three.js est une bibliothèque JavaScript pour créer des scènes 3D dans un navigateur web. Elle peut être utilisée avec la balise canvas du HTML5 sans avoir besoin d'un plugin. Le code source est hébergé sur le GitHub de son créateur mrDoob.
Son principe est d'être accessible à tout le monde, elle permet des rendus en WebGL, CSS3D et SVG.
Sa logique est proche - bien que plus moderne - du moteur graphique Shockwave d'Adobe, qui était l'ancien standard de la 3D en navigateur avant la généralisation du WebGL. Les objets sont rangés en arborescence de matrices, avec un système parent/enfants. Le matériau par défaut est très simple mais il dispose de nombreuses options pour y ajouter divers effets.
La bibliothèque contient par exemple les fonctionnalités suivantes :
- Animation par squelette
- LOD (niveau de détails pour les objets)
- Chargement de fichiers aux formats .OBJ, .JSON, .FBX, .DAE, .GLB
- Système de particules (pour par exemple simuler la neige, le feu, etc.)
- Système de collisions pour jeux vidéos, basé sur un stockage des triangles dans un octree.
Exemple
[modifier | modifier le code ]Le code suivant crée une scène et ajoute une caméra et un cube, une balise de rendu canvas s'ajoute à la page. Une fois chargé, le cube tourne sur son axe X et Y.
<script> varcamera,scene,renderer, geometry,material,mesh; init(); animate(); functioninit(){ scene=newTHREE.Scene(); camera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,10000); camera.position.z=1000; geometry=newTHREE.BoxGeometry(200,200,200); material=newTHREE.MeshBasicMaterial({color:0xff0000,wireframe:true}); mesh=newTHREE.Mesh(geometry,material); scene.add(mesh); renderer=newTHREE.CanvasRenderer(); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); } functionanimate(){ // note: three.js includes requestAnimationFrame shim requestAnimationFrame(animate); render(); } functionrender(){ mesh.rotation.x+=0.01; mesh.rotation.y+=0.02; renderer.render(scene,camera); } </script>
Bibliographie
[modifier | modifier le code ]Livres sur la programmation avec Three.js:
- (en) Tony Parisi, WebGL : Up and Running, Sebastopol, Oreilly & Associates Inc, , 211 p. (ISBN 978-1-4493-2357-8, lire en ligne)
- (en) Jacob Seidelin, HTML5 games : creating fun with HTML5, CSS3, and WebGL, Chichester, West Sussex, U.K, John Wiley & Sons, , 412–414 p. (ISBN 978-1-119-97508-3 et 1-119-97508-5) - "Three.js can make game development easier by taking care of low-level details"
- (en) James Williams, Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL, Upper Saddle River, NJ, Addison-Wesley, , 117–120, 123–131, 136, 140–142 (ISBN 978-0-321-76736-3 et 0-321-76736-5, lire en ligne)
- (en) Jon Raasch, Smashing WebKit, Chichester, Wiley, , 181, 182, 216 (ISBN 978-1-119-99913-3 et 1-119-99913-8, lire en ligne)
- (en) James Williams, Three.js By Example, Vancouver, Canada, Leanpub, (lire en ligne)
Annexes
[modifier | modifier le code ]Notes et références
[modifier | modifier le code ]- ↑ (en) « LICENSE »
- ↑ « Release 184 », (consulté le )
Sur les autres projets Wikimedia :
- Three.js, sur Wikimedia Commons
Liens externes
[modifier | modifier le code ]- (en) Site officiel de la bibliothèque.
- (en) sources de Three.js sur GitHub
- (en) http://threejs.org/docs/ Documentation
- AlteredQualia
- Stemkoski Three.js Examples
- 1-2-three: graphic simulation by example
- Learning Three.js
- kepo-ing Zz85
- Learning WebGL
- ThreeJS Journey - Learning WebGL with Three.js
- WebGL Review Site
- Laby