Introduction
J'ai utilisé Three.js pour certaines de mes expérimentations, et il fait un excellent travail pour éliminer les difficultés liées à la 3D dans le navigateur. Il vous permet de créer des caméras, des objets, des lumières, des matériaux, etc. Vous pouvez choisir un moteur de rendu, ce qui signifie que vous pouvez décider si vous souhaitez que votre scène soit dessinée à l'aide du canevas HTML 5, de WebGL ou de SVG. Et comme il s'agit d'un projet Open Source, vous pouvez même vous y impliquer. Mais pour l'instant, je vais me concentrer sur ce que j'ai appris en l'utilisant comme moteur et vous expliquer quelques principes de base.
Malgré l'incroyable utilité de Three.js, vous pouvez parfois rencontrer des difficultés. En règle générale, vous devrez passer beaucoup de temps sur les exemples, l'ingénierie inverse et (dans mon cas, certainement) la recherche de fonctionnalités spécifiques, et parfois poser des questions via GitHub. Si vous avez des questions, sachez que Mr. doob et AlteredQualia sont extrêmement utiles.
1. Principes de base
Je suppose que vous avez au moins une connaissance superficielle de la 3D et une maîtrise raisonnable de JavaScript. Si ce n'est pas le cas, il peut être utile de vous renseigner un peu avant de vous lancer, car cela peut être un peu déroutant.
Dans notre monde 3D, nous allons avoir certains des éléments suivants, que je vais vous guider pour créer:
- Une scène
- Un moteur de rendu
- Un appareil photo
- Un ou deux objets (avec des matériaux)
Vous pouvez bien sûr faire des choses intéressantes, et j'espère que vous allez continuer et commencer à expérimenter la 3D dans votre navigateur.
2. Assistance
Petite remarque concernant la compatibilité dans les navigateurs. D'après mon expérience, le navigateur Chrome de Google est le meilleur navigateur à utiliser en termes de moteurs de rendu compatibles et de vitesse du moteur JavaScript sous-jacent. Chrome est compatible avec Canvas, WebGL et SVG, et il est ultra-rapide. Firefox arrive en deuxième position, avec l'arrivée de la version 4. Son moteur JavaScript semble être un peu plus lent que celui de Chrome, mais là encore, sa compatibilité avec les technologies de rendu est excellente. Opera et Safari sont en train d'ajouter la prise en charge de WebGL, mais leurs versions actuelles ne sont compatibles qu'avec le canevas. Internet Explorer (version 9 et versions ultérieures) n'est compatible qu'avec le rendu du canevas. Je n'ai pas entendu dire que Microsoft prévoyait d'ajouter des fonctionnalités WebGL.
3. Planter le décor
Je suppose que vous avez choisi un navigateur compatible avec toutes les technologies de rendu et que vous souhaitez effectuer le rendu avec un canevas ou WebGL, car ce sont les options les plus standards. Canvas est plus largement compatible que WebGL, mais il est important de noter que WebGL s'exécute sur le GPU de votre carte graphique, ce qui signifie que votre processeur peut se concentrer sur d'autres tâches non de rendu, comme toute interaction physique ou utilisateur que vous essayez d'effectuer.
Quel que soit le moteur de rendu que vous choisissez, gardez à l'esprit que le code JavaScript doit être optimisé pour les performances. La 3D n'est pas une tâche légère pour un navigateur (et c'est incroyable que cela soit même possible). Veillez donc à identifier les goulots d'étranglement dans votre code et à les supprimer si possible.
Par conséquent, en supposant que vous ayez téléchargé et inclus Three.js dans votre fichier HTML, comment configurer une scène ? Exemple :
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
Ce n'est pas trop compliqué, en fait !
4. Créer un réseau maillé
Nous avons donc une scène, une caméra et un moteur de rendu (j'ai opté pour un moteur WebGL dans mon code exemple), mais nous n'avons rien à dessiner. Three.js est compatible avec le chargement de plusieurs types de fichiers standards, ce qui est idéal si vous exportez des modèles à partir de Blender, Maya, Cinema4D ou autre. Pour plus de simplicité (il s'agit de commencer, après tout !) Je vais parler des primitives. Les primitives sont des maillages géométriques, relativement basiques, comme les sphères, les plans, les cubes et les cylindres. Three.js vous permet de créer facilement ces types de primitives:
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
Tout va bien, mais qu'en est-il du matériau de la sphère ? Dans le code, nous avons utilisé une variable sphereMaterial, mais nous ne l'avons pas encore définie. Nous devons d'abord parler des matériaux plus en détail.
5. Matériaux
Il s'agit sans aucun doute de l'une des parties les plus utiles de Three.js. Il vous fournit un certain nombre de matériaux courants (et très pratiques) à appliquer à vos maillages:
- "Basic" (Basique) : cela signifie simplement qu'il s'affiche "non éclairé".
- Lambert
- Phong
Il y en a d'autres, mais pour plus de simplicité, je vous laisse les découvrir par vous-même. Dans le cas de WebGL, ces matériaux peuvent être particulièrement utiles. Pourquoi ? En effet, dans WebGL, vous devez écrire des nuanceurs pour tout ce qui est rendu. Les nuanceurs sont un sujet vaste en soi, mais en résumé, ils sont écrits en GLSL (OpenGL Shader Language), qui indique au GPU à quoi un élément doit ressembler. Cela signifie que vous devez imiter les mathématiques de l'éclairage, de la réflexion, etc. Cela peut devenir très compliqué très rapidement. Grâce à Three.js, vous n'avez pas besoin de le faire si vous ne le souhaitez pas, car il vous en abstrait. Toutefois, si vous souhaitez écrire des nuanceurs, vous pouvez également le faire avec un MeshShaderMaterial. Il s'agit donc d'une configuration flexible.
Pour l'instant, appliquons un matériau lambert à la sphère:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
Il est également important de noter que vous pouvez spécifier d'autres propriétés lorsque vous créez un matériau en plus de la couleur, comme des cartes de lissage ou d'environnement. Consultez la page Wiki pour connaître les différentes propriétés que vous pouvez définir sur les matériaux et, en fait, sur n'importe quel objet fourni par le moteur. threejs.org a également vu le jour récemment, ce qui offre une vue plus attrayante de l'API.
6. Lumières !
Si vous lisiez la scène maintenant, un cercle rouge s'afficherait. Même si un matériau Lambert est appliqué, il n'y a pas de lumière dans la scène. Par défaut, Three.js revient donc à une lumière ambiante complète, ce qui est identique à la coloration plate. Résolvons ce problème avec un simple point lumineux:
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
7. Rendu
Nous avons maintenant tout configuré pour l'affichage. Mais nous devons en fait faire exactement cela:
// draw!
renderer.render(scene, camera);
Vous voudrez probablement effectuer le rendu plusieurs fois. Par conséquent, si vous allez créer une boucle, vous devez vraiment utiliser requestAnimationFrame. C'est de loin la méthode la plus intelligente pour gérer l'animation dans le navigateur. Il n'est pas encore entièrement compatible. Je vous recommande donc vivement de consulter le shim de Paul Irish.
8. Propriétés d'objet courantes
Si vous prenez le temps de parcourir le code de Three.js, vous verrez que de nombreux objets "héritent" d'Object3D. Il s'agit d'un objet de base qui contient des propriétés très utiles, telles que les informations de position, de rotation et d'échelle. Plus précisément, notre sphère est un maillage qui hérite d'Object3D, auquel il ajoute ses propres propriétés : la géométrie et les matériaux. Pourquoi je mentionne ces points ? Il est peu probable que vous souhaitiez simplement afficher une sphère sur votre écran qui ne fait rien. Ces propriétés méritent d'être étudiées, car elles vous permettent de manipuler les détails sous-jacents des maillages et des matériaux à la volée.
// sphere geometry
sphere.geometry
// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array
// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same
9. Dirty Little Secrets
Je voulais juste vous signaler un point important concernant Three.js : si vous modifiez, par exemple, les sommets d'un maillage, vous remarquerez dans votre boucle de rendu que rien ne change. Pourquoi ? Eh bien, parce que Three.js (à ce que je sache) met en cache les données d'un maillage en tant qu'optimisation. Vous devez indiquer à Three.js qu'un élément a changé afin qu'il puisse recalculer ce dont il a besoin. Pour ce faire, procédez comme suit:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
Il en existe d'autres, mais ces deux sont les plus utiles. Vous ne devez évidemment signaler que les éléments qui ont changé pour éviter des calculs inutiles.
Conclusion
J'espère que cette brève introduction à Three.js vous a été utile. Rien ne vaut de se salir les mains et d'essayer quelque chose. Je ne peux que vous recommander de le faire. L'exécution de la 3D en mode natif dans le navigateur est très amusante. L'utilisation d'un moteur comme Three.js vous évite de nombreux problèmes et vous permet de créer des choses vraiment cool. Pour vous aider, j'ai encapsulant le code source dans cet article de l'atelier. Vous pouvez donc l'utiliser comme référence. Si vous avez apprécié cet article, n'hésitez pas à me le faire savoir sur Twitter. C'est toujours agréable de discuter !