Share
La complexité du Web change chaque jour et ses possibilités augmentent tout aussi rapidement. en particulier avec le rendu 3D. WebGL (Web Graphics Library) est une API JavaScript permettant de rendre des graphiques interactifs 3D et 2D. Three.js de Ricardo Cabello est une bibliothèque construite sur WebGL, garantissant la compatibilité du code créé avec différents navigateurs..
Three.js est pour WebGL ce que jQuery est pour JavaScript, offrant une syntaxe déclarative appréciée de tant de personnes et permettant d'éliminer les soucis de la 3D dans le navigateur. Passons en revue, obtenons un aperçu général de la syntaxe et voyons comment commencer si vous débutez dans le jeu 3D..
Regardez la démo suivante sur CodePen; utilisez le curseur de votre souris pour déplacer le modèle, faites un zoom avant ou arrière avec la molette de la souris.
Nous allons travailler dans CodePen par souci de facilité; commencez par créer un lien vers Three.js (CDN 126Kb) à partir de l’onglet JS.
Nous commençons par créer une scène, comme vous démarrez avec une toile dans Photoshop. Une scène est définie avec une variable avant que tout autre code ne soit créé. Donc, dans votre volet JS, ajoutez:
var scene = new THREE.Scene ();
Avec les rideaux levés et prêts pour notre performance, nous aurons besoin d’un moyen de visualiser notre temps incroyable pour présenter une caméra. Three.js est livré avec un ensemble de caméras, telles que PerspectiveCamera, StereoCamera, Caméra orthographique et CubeCamera. Pour nos besoins, nous utiliserons le PerspectiveCamera comme il est conçu pour imiter la façon dont l'œil humain voit. Tout comme nous définissons une scène avec une variable, nous faisons la même chose pour définir une caméra:
var camera = new THREE.PerspectiveCamera ();
Notre PerspectiveCamera accepte quatre arguments: fov, aspect, près et loin.
Accentsconagua
fov (champ de vision) est ce que vous pouvez voir autour du centre de la caméra. Pensez en termes d'objectif grand angle sur un appareil photo par rapport à un objectif standard. aspect est le rapport du fov, ou en d'autres termes, la largeur à la hauteur d'un écran (par exemple 4: 5, 16: 9). près et loin, sont les plans d'un solide. Ensemble, ils contrôlent si un objet est rendu en fonction de sa distance à la caméra.. près est le plus proche qu'un objet ou une partie d'un objet peut être à la caméra tout en restant rendu, loin est le plus éloigné qu'un objet puisse être de la caméra et être toujours restitué. Ensemble, ceux-ci définissent le tronc de visualisation de la caméra.
Regarde un trucVoici un exemple de la PerspectiveCamera arguments:
var camera = nouvelle THREE.PerspectiveCamera (75, window.innerWidth / window.innerHeight, 0.1, 1000);
Il n’est pas important de comprendre chaque valeur à ce stade, sauf d’être conscient des valeurs qui pouvez être passé. En continuant, nous devrons définir la position de la caméra.
camera.position.set (x, y, z);
Cette ligne est la position locale de l'objet. Cela définit le X, y et Coordonnées z du vecteur. Sans cela, la caméra ne verra rien.
Le prochain ingrédient important de notre recette est la création d'un WebGLRenderer. C'est la pièce qui est responsable de la magie d'afficher votre création.
var renderer = new THREE.WebGLRenderer ();
le WebGLRenderer peut également accepter les propriétés et les valeurs transmises en tant qu'objet.
var renderer = new THREE.WebGLRenderer (alpha: true // remove canvas 'bg color);
Il y en a plusieurs valeur de la propriété les paires qui peuvent être utilisées - elles sont répertoriées dans la documentation si vous décidez de plonger plus profondément plus tard (quelque chose que j'encourage fortement).
Avec le rendu défini, nous pouvons définir des méthodes pour personnaliser davantage notre création, telles que setSize; une méthode que vous utiliserez dans presque tous les projets Three.js.
// Rendre le rendu de scène la taille du rendu d'écran.setSize (window.innerWidth, window.innerHeight);
Il existe de nombreuses autres méthodes que vous pouvez utiliser, mais nous nous en tiendrons à nos fins. setSize ().
Maintenant que la taille souhaitée est définie, nous avons besoin d’un moyen de la relier au DOM..
document.body.appendChild (renderer.domElement);
Ce domElement la propriété est où le rendu tire sa sortie et sera sous la forme d'un Toile élément. Bien que j'utilise document.body vous pouvez ajouter ou préfixer le Toile élément où vous voulez. C’est vraiment à vous de décider où vous souhaitez le placement en fonction des besoins de votre projet.
Pour la prochaine étape, nous devons créer un objet car tout ce que nous avons fait jusqu'à présent est de déclarer une scène, une caméra et un moteur de rendu. À des fins de démonstration, prenons un téléphone portable de 3D Warehouse afin de créer un aperçu des produits pour les acheteurs d'un iPhone en ligne..
iPhone 6+ de Jeremie PEn règle générale, vous pouvez utiliser des applications telles que SketchUp ou même Blender pour dessiner vos objets 3D. Toutefois, la courbe d'apprentissage des applications de dessin 3D est longue. Cette courbe sort du cadre de cet article..
Pour insérer notre objet 3D dans la scène, nous devons utiliser le ColladaLoader. Il est à noter que tout graphique que vous décidez d'utiliser doit généralement avoir une taille inférieure à 1-2 Mo et doit être un fichier Collada pour pouvoir être utilisé avec Three.js: il s'agit des fichiers qui se terminent par le fichier. .dae extension. Si vous ouvrez un fichier Collada, vous verrez qu'il est écrit en XML.
Nous commençons par définir le ColladaLoader en utilisant une variable et en appelant la méthode tout en définissant une autre variable pour représenter le graphique 3D en vue d'un référencement ultérieur.
var dae, // graphic loader = new THREE.ColladaLoader (); // chargeur
C'est un bon début, mais nous avons encore du travail à faire pour pouvoir afficher le téléphone. Faisons une fonction qui fera exactement cela:
fonction loadCollada (collada) dae = collada.scene; scene.add (dae);
Pour la prochaine étape, nous utiliserons le charge méthode, passez l'URL de notre fichier Collada, puis appelez notre fonction par son nom comme deuxième argument:
loader.load ('http://myurl.com/file/iphone6.dae', loadCollada);Si vous souhaitez en savoir plus sur le ColladaLoader vous pouvez creuser à travers le code source sur GitHub.
Avec notre chargeur et notre graphique enfin en place, il reste une dernière étape. nous devons créer ce qu'on appelle une "boucle de rendu". C’est parce que nous n’avons encore rien rendu.
C'est cette "boucle de rendu" qui amène le moteur de rendu à dessiner la scène soixante fois par seconde. La fonction suivante donnera vie à notre création (la meilleure partie de tout le processus).
fonction renderPhone () requestAnimationFrame (renderPhone); renderer.render (scène, caméra); renderPhone ();
requestAnimationFrame a un certain nombre d'avantages. Le plus important est qu'il s'interrompt lorsque l'utilisateur accède à un autre onglet du navigateur, ce qui ne gaspille en fin de compte pas la puissance de traitement et la vie de la batterie.
Le résultat de tout ce travail est un doux rendu d'un iPhone 3D que vous pouvez utiliser pour faire pivoter et faire un zoom avant ou arrière:
Il reste encore quelques éléments dans la création finale. Je vous encourage donc à vous plonger plus profondément dans le panneau JavaScript de la démo..
Par exemple; Éclairage (Lumière ambiante, HémisphèreLight, PointLight), TrackballControls, AxisHelper et un événement de redimensionnement de la fenêtre. Certains des éléments mentionnés ne contiennent pas de documentation telle que TrackballControls, mais vous pouvez trouver toutes les propriétés disponibles dans le fichier JS principal sur GitHub. Il existe d’autres contrôles vraiment intéressants que vous pouvez utiliser, qui sont également répertoriés sur GitHub..
Parfois, vous avez besoin d’un peu d’inspiration pour que votre cerveau puisse lancer des idées à un rythme rapide. Voici quelques unes de mes démos préférées utilisant Three.js qui transforment les rêves en réalité.
https://paperplanes.world
https://throughthedark.withgoogle.com (prenez vos écouteurs)
http://carvisualizer.plus360degrees.com/threejsRachel Smith a écrit un excellent article sur CodePen à propos de WebGL et je recommande fortement de le lire lorsque vous avez du temps libre. Le tutoriel est plein de langage simple et constitue une explication détaillée de Three.js traitant de la scène, de la géométrie, de la lumière, des matériaux et de l’animation que je ne pourrais certainement pas couvrir dans ce court article..
Vous pouvez également profiter de:
Cet article n'aurait pas été possible sans l'aide généreuse de la communauté Animation at Work Slack. J'aimerais donc remercier (sans ordre particulier) Stephen Shaw, Jeff Ayer, Louis Hoebregts, Neil Pullman, Eli Fitch et Chris Johnson..
