_ _    _ _____  ___   __                       
 __      _(_) | _(_)___ / ( _ ) / /_   ___ ___  _ __ ___  
 \ \ /\ / / | |/ / | |_ \ / _ \| '_ \ / __/ _ \| '_ ` _ \ 
  \ V  V /| |   <| |___) | (_) | (_) | (_| (_) | | | | | |
   \_/\_/ |_|_|\_\_|____/ \___/ \___(_)___\___/|_| |_| |_|

Three.js

Dans cet article, nous allons approfondir le sujet de Three.js, qui a suscité un grand intérêt ces dernières années. _Var1 est un concept qui a fait l'objet de débats et de discussions dans différents domaines, de la politique à la science. Tout au long de l’histoire, Three.js a joué un rôle fondamental dans la société, façonnant la manière dont les gens interagissent les uns avec les autres et avec l’environnement qui les entoure. En ce sens, il est essentiel de comprendre en profondeur les différents aspects qui englobent Three.js, ainsi que son influence sur la prise de décision et la configuration de la réalité qui nous entoure. C’est pourquoi, tout au long de cet article, nous explorerons les différentes approches et perspectives liées à Three.js, dans le but de faire la lumière sur un sujet qui continue de susciter aujourd’hui un grand intérêt et une grande curiosité.

Cet article est une ébauche concernant l’informatique.

Vous pouvez partager vos connaissances en l’améliorant (comment ?) selon les recommandations des projets correspondants.

Three.js
Description de l'image Three.js logo.png.
Description de l'image Three.js-code-example.jpg.
Informations
Développé par MrDoob et autres auteurs de Three.js
Première version
Dernière version r159 ()
Dépôt github.com/mrdoob/three.jsVoir et modifier les données sur Wikidata
Écrit en JavaScriptVoir et modifier les données sur Wikidata
Système d'exploitation MultiplateformeVoir et modifier les données sur Wikidata
Type Interface de programmation
Bibliothèque JavaScript
Bibliothèque logicielleVoir et modifier les données sur Wikidata
Licence Licence MITVoir et modifier les données sur Wikidata
Site web threejs.orgVoir et modifier les données sur Wikidata

modifier - modifier le code - voir Wikidata (aide)

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

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>

Bibliographie

Livres sur la programmation avec Three.js:

Annexes

Notes et références

  1. ↑ (en) « LICENSE »

Sur les autres projets Wikimedia :

Liens externes

Wikious
Sapientia
Scientia
Boobota
Sagapedia
Wikithot