Share
Les graphiques 3D dans le navigateur sont un sujet brûlant depuis son introduction. Mais si vous deviez créer vos applications en utilisant WebGL standard, cela prendrait des siècles. C'est exactement pourquoi certaines bibliothèques vraiment utiles ont été créées récemment. Three.js est l’un des plus populaires. Dans cette série, je vous montrerai comment l'utiliser au mieux pour créer des expériences 3D époustouflantes pour vos utilisateurs..
Avant de commencer, je m'attends à ce que vous ayez une compréhension de base de l'espace 3D avant de commencer à lire ce tutoriel, car je ne vais pas expliquer des choses telles que des coordonnées, des vecteurs, etc..
Tout d'abord, créez trois fichiers: index.html, main.js et style.css. Maintenant, téléchargez Three.js (fichier zip complet avec exemples et source, ou fichier JavaScript uniquement, à votre choix). Ouvert index.html et insérez ce code:
C'est tout ce dont vous avez besoin dans ce fichier. Juste une déclaration de scripts et de feuille de style. Toute la magie se passera dans main.js, mais avant d’arriver à cela, nous avons besoin d’une astuce supplémentaire pour rendre l’application belle. Ouvrir style.css et insérez ce code:
toile position: fixe; en haut: 0; gauche: 0;
Cela positionnera la toile dans le coin supérieur gauche, car par défaut le corps aura 8px de marge. Maintenant nous pouvons continuer avec le code JavaScript.
Three.js utilise le concept de liste d'affichage. Cela signifie que tous les objets sont stockés dans la liste puis dessinés à l'écran.
Three.js utilise le concept de liste d'affichage. Cela signifie que tous les objets sont stockés dans la liste, puis dessinés à l'écran. Ici, c'est un TROIS.Scene objet. Vous devez ajouter à la scène tout objet que vous souhaitez dessiner à l'écran. Vous pouvez avoir autant de scènes que vous le souhaitez, mais un moteur de rendu ne peut dessiner qu'une scène à la fois (vous pouvez bien entendu changer de scène)..
Le moteur de rendu dessine simplement tout, de la scène au canevas WebGL. Three.js prend également en charge le dessin sur du canevas SVG ou 2D, mais nous allons nous concentrer sur WebGL..
Pour commencer, stockons la largeur et la hauteur de la fenêtre dans des variables, nous l'utiliserons plus tard:
var width = window.innerWidth; var height = window.innerHeight;
Définissez maintenant le rendu et la scène:
var renderer = new THREE.WebGLRenderer (antialias: true); renderer.setSize (largeur, hauteur); document.body.appendChild (renderer.domElement); var scene = new THREE.Scene;
La première ligne définit le rendu WebGL. Vous pouvez passer les options du rendu dans le premier argument sous forme de carte. Ici, nous définissons le antialias vrai, parce que nous voulons que les bords des objets soient lisses et non irréguliers.
La deuxième ligne définit la taille du rendu à la taille de la fenêtre et à la troisième, on ajoute le rendu Toile élément du document (vous pouvez aussi le faire en utilisant une bibliothèque, comme jQuery: $ ('body'). append (renderer.domElement)).
Le dernier définit la scène, aucun argument n'est nécessaire.
Ajoutons maintenant quelque chose à dessiner. Soit un cube, car c’est l’objet 3D le plus simple. Dans Three.js, les objets dessinés à l'écran sont appelés des mailles. Chaque maille doit avoir sa propre géométrie et son propre matériau. La géométrie est un ensemble de points qui doivent être connectés pour créer l'objet. Le matériau est simplement la peinture (ou la peinture, mais ce n'est pas le sujet de ce tutoriel) qui couvrira l'objet. Alors, créons notre cube. Heureusement pour nous, il existe des fonctions d’aide dans Three.js pour la création de primitives (formes simples):
var cubeGeometry = new THREE.CubeGeometry (100, 100, 100); var cubeMaterial = new THREE.MeshLambertMaterial (color: 0x1ec876); var cube = new THREE.Mesh (cubeGeometry, cubeMaterial); cube.rotation.y = Math.PI * 45/180; scene.add (cube);
Comme vous pouvez le constater, nous créons d’abord la géométrie. Les arguments définissent une taille du cube: la largeur, la hauteur et la profondeur.
Ensuite, nous définissons le matériau du cube. Three.js contient quelques types de matériaux, mais cette fois-ci, nous utiliserons le THREE.MeshLambertMaterial, puisque nous voulons avoir un peu d’éclairage plus tard (ce matériau utilise l’algorithme de Lambert pour les calculs de lumière). Vous pouvez transmettre les options du premier argument sous forme de mappe, comme pour le rendu. Il s’agit plutôt d’une règle pour les objets plus complexes dans Three.js. Ici, nous utilisons uniquement la couleur, qui est passée sous forme de nombre hexadécimal.
Sur la troisième ligne, nous créons un maillage en utilisant la géométrie et le matériau créés précédemment. Ensuite, nous faisons pivoter le cube de 45 degrés sur l’axe des Y pour le rendre meilleur. Nous devons changer les degrés en radians, ce qui est traité par l'équation dont vous vous souvenez probablement de votre cours de physique au lycée: Math.PI * 45/180. Enfin, le cube est ajouté à la scène.
Maintenant vous pouvez ouvrir index.html dans votre navigateur pour voir les résultats, mais vous ne verrez rien car la scène n'est pas encore rendue.
Pour rendre quelque chose, nous devons d’abord ajouter la caméra à la scène afin que le moteur de rendu sache à partir de quel point de vue il doit effectuer le rendu. Il existe quelques types de caméras dans Three.js, mais vous n’utiliserez probablement que TROIS.PerspectiveCamera. Ce type de caméra présente la scène lorsque nous voyons notre monde. Permet de créer un:
var camera = nouveau THREE.PerspectiveCamera (45, largeur / hauteur, 0,1, 10000);
"Pour rendre quelque chose, nous devons d'abord ajouter la caméra à la scène, de sorte que le moteur de rendu sache à partir de quel point de vue il doit effectuer le rendu."
Créer la caméra est un peu plus compliqué que le reste de ce que nous avons fait jusqu'à présent. Le premier argument définit le champ de vision (FOV), l'angle visible depuis l'endroit où se trouve la caméra. Un champ de vision de 45 degrés semble naturel. Ensuite, nous définissons le ratio de la caméra. C'est toujours la largeur du rendu divisée par sa hauteur, sauf si vous souhaitez obtenir des effets spéciaux. Les deux derniers chiffres définissent à quelle distance et à quelle distance l'objet peut être dessiné.
Nous devons maintenant déplacer la caméra un peu en arrière, car tous les objets créés dans Three.js ont leur position définie au milieu de la scène (x: 0, y: 0, z: 0) par défaut:
camera.position.y = 160; camera.position.z = 400;
le z coordonnée est positive dans la direction du spectateur, donc les objets avec un plus haut z la position apparaîtra plus proche de vous (dans ce cas, puisque nous avons déplacé la caméra, tous les objets apparaîtront plus loin de vous).
Maintenant, ajoutons la caméra à la scène et rendons-la:
scene.add (caméra); renderer.render (scène, caméra);
Vous ajoutez la caméra comme vous avez ajouté le cube. La ligne suivante rend la scène à l'aide de cette caméra. Maintenant, vous pouvez ouvrir le navigateur et vous devriez voir ce qui suit:
Vous devriez seulement être capable de voir le haut du cube. C'est parce que nous avons déplacé la caméra vers le haut et c'est toujours regardant directement en face de lui. Ceci peut être corrigé en indiquant à la caméra à quelle position elle devrait Regardez. Ajoutez cette ligne après les lignes définissant la position de la caméra:
camera.lookAt (cube.position);
Le seul argument transmis est une position sur laquelle la caméra se penchera. Maintenant, la scène semble meilleure, mais le cube est toujours noir, quelle que soit la couleur que vous avez définie lors de sa création:
Le cube est noir, car il n’ya pas de lumière sur la scène, c’est donc comme une pièce complètement noire. Vous voyez un fond blanc car il n'y a rien à séparer du cube. Pour éviter cela, nous allons utiliser une technique appelée skybox. Fondamentalement, nous allons ajouter un gros cube qui affichera l’arrière-plan de la scène (généralement un terrain lointain s’il s’agit d’un espace ouvert). Alors, permet de créer la boîte. Ce code devrait aller avant la renderer.render appel:
var skyboxGeometry = new THREE.CubeGeometry (10000, 10000, 10000); var skyboxMaterial = new THREE.MeshBasicMaterial (color: 0x000000, side: THREE.BackSide); var skybox = new THREE.Mesh (skyboxGeometry, skyboxMaterial); scene.add (skybox);
Ce code est similaire à celui qui crée le cube. Mais cette fois, la géométrie est beaucoup plus grande. Nous avons également utilisé TROIS.MeshBasicMaterial puisque nous n'avons pas besoin d'allumer la skybox. Notez également l’argument supplémentaire passé au matériau: côté: THREE.BackSide. Puisque le cube sera affiché de l'intérieur, nous devons changer le côté dessiné (normalement, Three.js dessine uniquement les murs extérieurs)..
Maintenant, la scène rendue est complètement noire. Pour résoudre ce problème, nous devons ajouter de la lumière à la scène. Nous utiliserons TROIS.PointLight, qui émet la lumière comme une ampoule. Ajoutez ces lignes après la skybox:
var pointLight = new THREE.PointLight (0xffffff); pointLight.position.set (0, 300, 200); scene.add (pointLight);
Comme vous pouvez le constater, nous avons créé le point lumineux blanc, puis nous le positionnons légèrement vers le haut et l'arrière pour éclairer l'avant et le haut du cube. Enfin, la lumière est ajoutée à la scène comme n'importe quel autre objet. Ouvrez le navigateur et vous devriez voir un cube coloré et ombré:
Mais le cube est toujours assez ennuyeux. Ajoutons-y un peu de mouvement.
Nous allons maintenant ajouter un peu de mouvement à la scène. Permet de faire tourner le cube autour de l'axe des ordonnées. Mais d’abord, nous devons changer la manière dont nous rendons la scène. Un renderer.render call, restitue l’état actuel de la scène une fois. Ainsi, même si nous animons le cube d’une manière ou d’une autre, nous ne le verrons pas bouger. Pour changer cela, nous devons ajouter la boucle de rendu à notre application. Ceci peut être réalisé en utilisant le renderAnimationFrame fonction créée spécialement à cet effet. Il est supporté par la plupart des principaux navigateurs, et pour ceux qui ne le supportent pas, Three.js est livré avec son propre polyfill. Alors, changeons ceci:
renderer.render (scène, caméra);
pour ça:
function render () renderer.render (scène, caméra); requestAnimationFrame (rendu); render ();
En fait, il n'y a pas de boucle, car cela gèlerait le navigateur. le requestAnimationFrame la fonction se comporte un peu comme setTimeout, mais il appelle la fonction passée aussi vite que le navigateur est prêt. Ainsi, rien n’a vraiment changé dans la scène affichée et le cube ne bouge toujours pas. Permet de résoudre ce problème. Three.js est livré avec TROIS heures qui peut être utilisé pour réaliser une animation fluide d'objets. Tout d’abord, initialisez-le avant le rendre définition de la fonction:
var clock = new THREE.Clock;
Maintenant, chaque fois que vous appelez clock.getDelta il renverra le temps écoulé depuis le dernier appel, en millisecondes. Cela peut être utilisé pour faire pivoter le cube comme ceci:
cube.rotation.y - = clock.getDelta ();
Ajouter cette ligne entre le renderer.render et le requestAnimationFrame appelle dans le rendre une fonction. Il consiste simplement à soustraire le temps écoulé depuis la rotation du cube sur l'axe des Y (rappelez-vous qu'il s'agit de radians) pour faire pivoter le cube dans le sens des aiguilles d'une montre. Maintenant, ouvrez le navigateur et vous devriez voir votre cube tourner dans le sens des aiguilles d'une montre en douceur.
Dans cette partie de la série, vous avez appris à préparer la scène, à ajouter des objets et des lumières et à animer des éléments. Vous pouvez expérimenter avec l'application, ajouter plus ou différents objets, lumières. C'est à vous. La prochaine fois, je vous montrerai comment utiliser les textures et comment créer de jolis effets avec des particules. N'oubliez pas de consulter la documentation si vous rencontrez des problèmes..
Accentsconagua