Three.js

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.

Three.js
Informations
Développé par MrDoob et autres auteurs de Three.js[1]
Première version
Dernière version r129 ()
Dépôt github.com/mrdoob/three.js
Écrit en JavaScript
Type interface de programmation, bibliothèque JavaScript, bibliothèque logicielle 2D/3D
Licence licence MIT
Site web https://threejs.org/

Son principe est d'être accessible à tout le monde, elle permet des rendus en WebGL, CSS3D et SVG.

Sa logique est très proche du moteur Shockwave d'Adobe, qui était l'ancien standard de la 3D en navigateur.

La bibliothèque contient par exemple les fonctionnalités suivantes :

Exemple

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>

    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.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );
    }

    function animate() {
        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );
    }

</script>

Notes et références
  1. (en) « LICENSE »

Bibliographie

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 p. (ISBN 978-0-321-76736-3 et 0-321-76736-5, lire en ligne)
  • (en) Jon Raasch, Smashing WebKit, Chichester, Wiley, , 181, 182, 216 p. (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

Liens externes
  • Portail de l’informatique
  • Portail de l’imagerie numérique
Cet article est issu de Wikipedia. Le texte est sous licence Creative Commons - Attribution - Partage dans les Mêmes. Des conditions supplémentaires peuvent s'appliquer aux fichiers multimédias.