Introduction
J'ai utilisé Three.js pour certains de mes tests et cet outil me permet d'éviter les problèmes liés à l'utilisation de la 3D dans le navigateur. Il vous permet de créer des appareils photo, des objets, des lumières, des matériaux, etc. Vous avez également le choix entre différents moteurs de rendu, ce qui vous permet de choisir si vous souhaitez dessiner votre scène à l'aide du canevas HTML5, WebGL ou SVG. Et comme c'est open source, vous pourriez même vous impliquer dans le projet. Mais pour l'instant, je vais me concentrer sur ce que j'ai appris en l'utilisant comme moteur et te présenter certaines notions de base.
Malgré les avantages de Three.js, vous pouvez parfois rencontrer des difficultés. En règle générale, vous devrez passer beaucoup de temps à examiner les exemples, à faire de la rétro-ingénierie et, dans mon cas certainement, à rechercher des fonctionnalités spécifiques et, parfois, à poser des questions via GitHub. Si vous avez des questions, sachez que M. Doob et AlteredQualia sont particulièrement utiles.
1. Principes de base
Je suppose que vous avez au moins des connaissances de base sur la 3D et une maîtrise raisonnable de JavaScript. Si ce n'est pas le cas, sachez que cela peut être un peu déroutant.
Dans notre monde en 3D, nous aurons quelques-uns des éléments suivants, que je vais vous guider tout au long du processus de création:
- Une scène
- Un moteur de rendu
- Un appareil photo
- Un ou deux objets (avec des matériaux)
Bien sûr, vous pouvez faire des choses intéressantes, et j'espère que vous continuerez à le faire et que vous commencerez à tester la 3D dans votre navigateur.
2. Assistance
Petite remarque concernant la compatibilité des navigateurs. D'après mon expérience, le navigateur Chrome de Google est le meilleur navigateur à utiliser en termes de compatibilité avec les moteurs de rendu et de rapidité du moteur JavaScript sous-jacent. Chrome est compatible avec Canvas, WebGL et SVG, et il est extrêmement rapide. Firefox est en deuxième position, avec l'avènement de la version 4. Son moteur JavaScript semble être 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 ultérieures) n'est compatible qu'avec le rendu Canevas, et je n'ai entendu dire que Microsoft envisage 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 le canevas ou WebGL, car il s'agit des options les plus standards. Dessin est plus largement compatible que WebGL, mais il convient 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 qui ne sont pas liées au rendu, comme toute interaction physique ou utilisateur que vous essayez d'effectuer.
Quel que soit le moteur de rendu choisi, gardez à l'esprit que JavaScript devra être optimisé pour les performances. La 3D n'est pas une tâche simple pour un navigateur (et c'est génial que cela soit même possible). Veillez donc à comprendre où se trouvent les goulots d'étranglement dans votre code et à les supprimer si vous le pouvez.
Cela dit, en partant du principe que vous avez 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);
Pas trop compliqué, vraiment !
4. Fabrication de mailles
Nous avons donc une scène, une caméra et un moteur de rendu (j'ai choisi WebGL dans mon exemple de code), mais nous n'avons rien à dessiner. Three.js permet de charger différents types de fichiers standards, ce qui est idéal si vous générez des modèles Blender, Maya, Cinema4D ou autre. Pour faire simple (il s'agit de commencer après tout !) je parlerai des primitives. Les primitives sont des maillages géométriques, des maillages relativement basiques tels que les sphères, les plans, les cubes et les cylindres. Three.js vous permet de créer facilement les types de primitives suivants:
// 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. D'abord, nous devons 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 ressources communes (et très pratiques) à appliquer à vos maillages:
- "Basic" signifie simplement qu'il s'affiche en mode "unlit" (non éclairé).
- Lambert
- Phong
Il y en a d'autres, mais pour plus de simplicité, je vais vous les laisser les découvrir par vous-même. Dans le cas de WebGL en particulier, ces matériaux peuvent se révéler très vitaux. Pourquoi ? Parce qu'avec WebGL, vous devez écrire des nuanceurs pour tout le rendu. Les nuanceurs constituent un sujet important en eux-mêmes, mais en bref, ils sont écrits en GLSL (OpenGL Shader Language), qui indique au GPU à quoi doit ressembler un élément. 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 à le faire si vous ne le souhaitez pas, car il les extrait pour vous. Si vous souhaitez écrire des nuanceurs, vous pouvez également le faire avec un MeshShaderMaterial, ce qui vous donne une configuration flexible.
Pour l'instant, cependant, 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 utile de souligner que vous pouvez spécifier d'autres propriétés lorsque vous créez un matériau en plus de la couleur, comme le lissage ou les cartes de l'environnement. Vous devez consulter la page Wiki pour connaître les différentes propriétés que vous pouvez définir sur les ressources et, en fait, tout objet fourni par le moteur. De plus, threejs.org a récemment vu le jour, offrant une vue plus attrayante de l'API.
6. Lumières !
Si vous effectuiez le rendu de la scène maintenant, vous verriez un cercle rouge. Même si nous avons appliqué un matériau Lambert, aucune lumière n'est présente dans la scène. Par défaut, Three.js rétablit une lumière ambiante complète, c'est-à-dire la même qu'une couleur unie. Résolvons ce problème à l'aide d'un simple point de lumière:
// 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
Ce qui est remarquable, c'est que tout est maintenant configuré pour le rendu. Mais en fait, nous devons continuer et faire exactement cela:
// draw!
renderer.render(scene, camera);
Toutefois, vous souhaiterez probablement effectuer un rendu plusieurs fois. Si vous effectuez une boucle, vous devez donc utiliser requestAnimationFrame. C'est la façon la plus intelligente de gérer l'animation dans le navigateur. Il n'est pas encore entièrement pris en charge. Je vous recommande donc vivement de jeter un œil au shim de Paul Irish.
8. Propriétés d'objet communes
Si vous prenez le temps d'examiner le code de Three.js, vous constaterez 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. En particulier, notre sphère est un maillage qui hérite d'Object3D, auquel il ajoute ses propres propriétés : geometry et materials. Pourquoi est-ce que je les mentionne ? Il est peu probable que vous souhaitiez avoir uniquement une sphère sur votre écran qui n'a aucun effet. Ces propriétés valent la peine d'être étudiées, car elles vous permettent de manipuler à la volée les détails sous-jacents des maillages et des matériaux.
// 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. Les petits secrets
Je voudrais juste vous signaler rapidement un piège pour Three.js : si vous modifiez, par exemple, les sommets d'un maillage, vous remarquerez dans votre boucle de rendu que rien ne change. Pourquoi ? Parce que Three.js met en cache les données d'un maillage dans le cadre d'une optimisation. Ce que vous devez faire est d'indiquer à Three.js que quelque chose a changé afin qu'il puisse recalculer tout 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;
Là encore, il y en a d'autres, mais ces deux-là que j'ai trouvés sont les plus utiles. Vous ne devez évidemment signaler que les éléments qui ont changé pour éviter les calculs inutiles.
Conclusion
J'espère que cette brève introduction à Three.js vous a été utile. Il n'y a rien de tel que se salir les mains et essayer quelque chose, et je ne le recommande vraiment pas assez. L'exécution native en 3D dans le navigateur est très amusante, et l'utilisation d'un moteur comme Three.js vous évite de nombreux soucis et vous permet de vous concentrer sur la création de contenus vraiment intéressants. Pour vous aider, j'ai récapitulé le code source dans cet article, afin que vous puissiez vous en servir comme référence. Si cela vous a plu, n'hésitez pas à me contacter sur Twitter.