introduction
Cet article explique principalement les concepts pertinents de trois.js et aide les lecteurs à développer une compréhension relativement complète des trois.js et des connaissances connexes.
Le Web s'est développé rapidement ces dernières années. Avec la popularité de HTML5, les capacités de performance des pages Web deviennent de plus en plus puissantes. Il existe déjà de nombreuses animations complexes et des effets exquis sur la page Web.
Mais les gens sont toujours gourmands. Alors, que peut-on faire d'autre au-dessus de cela? L'un d'eux consiste à dessiner des graphiques 3D haute performance dans les pages Web via WebGL.
Opengl, webgl à trois.js
Beaucoup de gens ont probablement entendu parler d' OpenGL , qui est la bibliothèque graphique multiplateforme la plus couramment utilisée.
WebGL est une norme graphique orientée Web conçue par OpenGL, offrant une série d'API JavaScript à travers laquelle le rendu graphique sera exploité pour atteindre des performances plus élevées.
Three.js est une bibliothèque graphique facile à utiliser formée en encapsulant et en simplifiant l'interface WebGL.
Pour le dire simplement: WebGL peut être considéré comme une interface fournie par le navigateur. Dans JavaScript, ces API peuvent être utilisées directement pour dessiner des graphiques 3D; et trois.js nous aident à encapsuler ces interfaces pour être plus utiles.
Comparaison de webgl et trois.js
Puisque nous avons WebGL, pourquoi avons-nous encore besoin de trois.js?
En effet, le seuil pour WebGL est relativement élevé et nécessite relativement plus de connaissances mathématiques. Bien que WebGL fournit une API frontale, WebGL et le développement frontal sont essentiellement deux directions différentes, et il y a peu de chevauchement de connaissances. La pertinence est qu'ils sont tous sur la plate-forme Web et qu'ils utilisent tous JavaScript. Un programmeur frontal peut être familier avec la géométrie analytique, mais il devrait y avoir très peu de personnes qui connaissent toujours l'algèbre linéaire (par exemple, essayez de trouver une matrice de transposition inverse?), Sans oublier que la signification physique des opérations matricielles est soulignée dans l'utilisation, qui manque également relativement dans l'enseignement.
Par conséquent, il est assez difficile pour les ingénieurs frontaux de commencer avec WebGL en peu de temps.
Par conséquent, Three.js a une très bonne encapsulation de l'interface fournie par WebGL, simplifiant de nombreux détails et réduisant considérablement les coûts d'apprentissage. Et, il y a peu de perte de flexibilité dans WebGL.
Par conséquent, commencer par trois.js vaut la peine de recommander, ce qui vous permet de faire face à la plupart des scénarios de demande après une étude plus courte.
Trois.js Problèmes d'apprentissage
Commencer avec trois.js est relativement simple, mais quand nous apprendrons vraiment, nous trouverons un problème embarrassant: il y a très peu de matériel d'apprentissage connexe.
Habituellement, cette bibliothèque populaire a des documents très complets, et souvent la meilleure façon d'apprendre des documents officiels ou des tutoriels d'introduction officiels. Mais trois ne l'est pas, sa documentation est trop concise pour les débutants.
Cependant, le fonctionnaire fournit une variété très riche d'exemples, et presque tous les usages dont vous avez besoin se reflètent dans un certain exemple. Mais ces exemples ne conviennent pas pour commencer, mais conviennent à l'apprentissage plus approfondi après le début.
Voici quelques tutoriels relativement bons:
Guide de démarrage de trois.js
Ceci est un bon tutoriel d'introduction léger pour trois.js. L'auteur a un très bon style d'écriture et les connaissances de base sont expliquées de manière concise et facilement compréhensible.
Guide de développement Three.js (première version chinoise)
Apprentissage trois.js - Deuxième édition
Apprentissage Three.js: La bibliothèque 3D JavaScript pour WebGL est le petit et le meilleur livre d'introduction de Three.js, qui explique les différentes fonctions de Three.js d'une manière plus complète .
Si vous avez la capacité, il est recommandé de lire la deuxième édition de la version anglaise, publiée en 2015, qui est très petite différente des trois.js actuels.
La version chinoise est traduite de la première édition du livre original publié en 2012. La plupart des concepts sont applicables, mais de nombreux détails ont changé.
Tutoriel trois.js
Il s'agit d'une traduction d'un tutoriel étranger, avec un total de six articles . Je n'explique pas beaucoup, mais c'est plus comment utiliser chaque fonction de base. Il convient plus aux étudiants avec une fondation graphique.
Bien sûr, ces documents ne sont certainement pas suffisants pendant le processus d'apprentissage réel. Lorsque vous rencontrez des problèmes, vous devez toujours vérifier les documents vous-même. Cependant, je voudrais vous rappeler que Three.js est mis à jour assez fréquemment, maintenant c'est la version R80. Depuis la sortie de R1 en avril 2010, il s'agit de la 72e version (certains numéros de version au milieu ont été ignorés). Par conséquent, certaines des informations trouvées sur Internet peuvent ne pas convenir à la version actuelle , vous devez donc faire attention à l'identification (les informations précédemment recommandées ont également plus ou moins de ces problèmes).
Quelques concepts en trois.js
Pour afficher les graphiques 3D à l'écran, l'idée est généralement comme ceci:
Construire un espace tridimensionnel
En trois, il est appelé scène (scène) pour sélectionner un point d'observation et déterminer la direction / angle d'observation, etc.
Trois l'appelle la caméra (caméra) pour ajouter des objets pour l'observation à la scène
Il existe de nombreux types d'objets en trois, y compris le maillage, la ligne, les points, etc. Ils héritent tous de la classe Object3D rend la scène observée à une zone spécifiée à l'écran.
Utilisez Renderer en trois pour le faire
Jetons un coup d'œil à ces concepts en détail en détail.
Scène
La scène est un conteneur de tous les objets, et il correspond également au monde tridimensionnel que nous créons.
Système de coordonnées de la caméra
La caméra est un observateur dans le monde en trois dimensions. Afin d'observer ce monde, nous devons d'abord décrire la position dans l'espace.
Le système de coordonnées de la main droite commun est utilisé en trois.
Projection tridimensionnelle
Il existe deux types de caméras en trois, à savoir la caméra de projection orthographique Three. Camérahographique et la caméra de projection en perspective Three.Perspective Camera.
La différence entre la projection orthogonale et la projection de perspective est représentée dans la figure ci-dessus. L'image de gauche est une projection orthogonale. La lumière émise par l'objet est projetée parallèle à l'écran, et les carrés loin et près de la même taille; La bonne image est une projection de perspective, qui est grande à proximité et petite dans le loin et le petit, ce qui est conforme à notre sentiment habituel de regarder les choses.
Wikipedia: projection 3D
Caméra de projection orthogonale
Remarque: le "point de vue" dans la figure correspond à la caméra en trois.
Ici, nous ajoutons un concept de corps visuel: le corps visuel est un corps géométrique, seuls les objets dans le corps visuel seront vus par nous, et les objets en dehors du corps visuel seront coupés. Il s'agit de supprimer les opérations inutiles.
Le corps de vue de la caméra de projection orthographique est un cuboïde. Le constructeur de l'orthographicamera est le suivant: OrthographicCamera (gauche, droite, haut, bas, près, loin)
La caméra elle-même peut être considérée comme un point, tandis que la gauche indique la distance entre le plan gauche et la caméra dans la direction gauche et droite. Il en va de même pour les autres paramètres. Par conséquent, les six paramètres définissent respectivement les positions des six faces du corps de vision.
On peut supposer approximativement que les objets du corps de vision sont projetés parallèles au plan proche, puis les images du plan proche sont rendues sur l'écran.
Caméra de projection en perspective
Le corps de visualisation de la caméra de projection en perspective est une plate-forme à quatre bords, et son constructeur est le suivant: PerspectiveCamera (FOV, aspect, près, loin)
Le FOV correspond à la perspective de la figure, qui est l'angle entre les côtés supérieurs et inférieurs. L'aspect est le rapport d'aspect du plan proche. Ajout de la distance proche du plan proche et de la distance lointaine loin, le seul moyen de déterminer la scène visuelle.
Les caméras de projection en perspective sont très cohérentes avec notre sentiment habituel de regarder les choses, donc dans la plupart des cas, nous utilisons des caméras de projection en perspective pour montrer les effets 3D.
Objets
Avec une caméra, vous devez regarder quelque chose, non? Ajoutez des objets à la scène.
Il existe de nombreux objets pour l'affichage en trois, qui sont tous hérités de la classe Object3d. Ici, nous regardons principalement le maillage et les points.
Engrener
Nous savons tous que dans le monde de l'ordinateur, un arc est connecté par un segment de ligne fini composé de points finis. Lorsqu'il y a beaucoup de lignes, cela ressemble à un arc lisse.
Le modèle tridimensionnel dans les ordinateurs est similaire. La pratique courante est de le décrire en utilisant une grille de triangles. Nous appelons ce modèle le modèle de maillage.
Il s'agit du célèbre lapin Stanford. Sa position dans les graphiques 3D est similaire à celle de Lena, un champ bien connu du traitement d'image numérique.
Regardez ce lapin, sa surface devient plus fluide / précise à mesure que le nombre de triangles augmente.
En trois, le constructeur de maillage est le suivant: maillage (géométrie, matériau)
La géométrie est sa forme, le matériau est son matériau.
Non seulement le maillage, ces deux propriétés sont utilisées pour créer de nombreux objets. Jetons un coup d'œil à ces deux attributs importants.
Géométrie
La géométrie, la forme, est assez intuitive. La géométrie utilise le modèle pour stocker l'ensemble des points et la relation entre les points (qui forment un triangle) pour atteindre le but de décrire la forme d'un objet.
Trois fournit de nombreuses formes de base telles que les cubes (en fait des cuboïdes), des plans (en fait des rectangles), des sphères, des cercles, des cylindres et des tables rondes;
Vous pouvez également construire des formes en définissant vous-même la position de chaque point;
Pour des formes plus complexes, nous pouvons également les importer via des fichiers de modèle externes.
Matériel
Matériau, matériau, ce n'est pas aussi intuitif que la forme.
Le matériau est en fait une collection de tous les attributs visuels, sauf la forme de la surface de l'objet, telles que la couleur, la texture, la douceur, la transparence, la réflectivité, l'indice de réfraction et la luminosité.
Ici, nous parlerons de la relation entre le matériel, la carte et la texture.
Le matériel a été mentionné ci-dessus et comprend des cartes et autres.
Les autocollants sont en fait «pâte» et «pâte», qui comprend les photos et où les photos doivent être publiées.
Quant à la texture, c'est en fait une «image».
Trois propose une variété de matériaux au choix et peuvent choisir librement la réflexion diffuse / spéculaire et d'autres matériaux.
Points
Après avoir parlé de Mesh, jetons un coup d'œil à un autre objet - des points.
Points est en fait une collection d'un tas de points. Il a été appelé ParticleSystem pendant longtemps auparavant. Il a été renommé PointCloud dans la version R68, et il a été renommé Points dans la version R72. Le changement de nom est principalement dû au fait que Mr.Doob estime que les systèmes de particules devraient être un système complet qui comprend le traitement des particules et des propriétés physiques connexes, tandis que les points en trois sont beaucoup plus simples. Donc, finalement, cette classe est nommée Points.
L'effet typique que les points peuvent être utilisés pour réaliser est le suivant: Exemple officiel
Lumière
Dieu a dit: il doit y avoir de la lumière!
L'effet lumière et ombre est un facteur important qui enrichit l'image.
Trois fournit une variété de sources lumineuses, notamment la lumière ambiante de lumière ambiante, le point de vue de la source de lumière ponctuelle, les projecteurs de projecteurs, la lumière directionnelle directionnelle, la lumière, la lumière de l'hémisphère de la lumière de l'hémisphère et la lumière.
Ajoutez simplement la source lumineuse requise à la scène.
Rendu
Divers objets sont construits dans la scène, la lumière et les caméras qui observent des objets, il est temps de rendre ce que vous voyez sur l'écran. C'est ce que fait le rendu.
Le rendu lie un objet Canvas et peut définir des propriétés telles que la taille, la couleur d'arrière-plan par défaut, etc.
Appelez la fonction de rendu de Renderer, passez dans la scène et la caméra, et vous pouvez rendre l'image en toile.
Faire bouger l'image
Maintenant, une image statique peut être obtenue, comment peut-elle se déplacer?
Une idée très simple consiste à modifier la position, l'angle et diverses propriétés de l'objet dans la scène, puis d'appeler la fonction de rendu à rendre.
Alors, comment déterminez-vous le moment de la rediffusion?
HTML5 nous fournit une requêteNImFrame, qui appelle automatiquement la fonction passée avant que chaque page repente.
Si nous le rendions au début:
Function Render () {renderer.render (scène, appareil photo);}Changez-le simplement pour cela:
function render () {requestAnimationFrame (render); object.position.x + = 1; renderer.render (scène, appareil photo);}L'objet peut bouger!
Donner un châtaignier
Utilisons un exemple simple pour régler ce processus.
Tout d'abord, écrivez une page avec des éléments de toile.
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> cube </ title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"> </javanli html, corps {marge: 0; rembourrage: 0; } #three_canvas {position: absolue; Largeur: 100%; hauteur: 100%; } nousFaisons la partie javascript ci-dessous
Initialisez d'abord Renderer
fonction initRenderer () {width = document.getElementById ('trois_canvas'). ClientWidth; height = document.getElementById ('trois_canvas'). ClientHeight; Renderer = new Three.WebglRenderrer ({// BindE Canvas to Renderer Canvas: document.getElementById ('trois_canvas')}); Renderer.SetSize (largeur, hauteur); // Définissez la taille de rendu au même que Canvas Renderer.SetClearColor (0xFFFFFF, 1.0); // Définissez la couleur et la transparence par défaut}Scénario d'initialisation:
function initsCene () {scene = new Three.Scene ();}Initialiser la caméra:
fonction initCamera () {// Caméra de projection orthogonale simple, face au centre de la fenêtre, la taille de la fenêtre est la même que la taille de la toile. caméra = new Three.othographicaMamera (largeur / -2, largeur / 2, hauteur / 2, hauteur / -2, 1, 1000); // Définissez la position de la caméra.Position.x = 0; caméra.position.y = 0; caméra.position.z = 200; // Définissez la caméra de direction de la caméra.Up.x = 0; caméra.up.y = 1; caméra.up.z = 0; // Définissez la position de mise au point de la caméra (en fait pour déterminer une direction) CAMERIE.LOORKAT ({x: 0, y: 0, z: 0});}Pour déterminer de manière unique la position et la direction d'une caméra, les trois attributs de position, de haut et de looks sont indispensables.
Ici, nous avons créé une caméra de projection orthogonale. Ici, je garde la taille de vue cohérente avec la résolution d'écran juste pour plus de commodité, de sorte qu'une longueur d'unité dans le système de coordonnées correspond à un pixel de l'écran.
Nous plaçons la caméra sur l'axe Z, face à l'origine de coordonnées, et la direction supérieure de la caméra est l'axe Y. Notez que la direction de l'UP et de la direction de Lookat doivent être perpendiculaires (vous saurez si vous vous comparez à votre propre tête).
Voici un cube ajouté à la scène:
fonction initioBject () {// Créer un cube avec une longueur latérale de 100 var géométrie = new Three.cubegeometry (100, 100, 100); objet = new Three.Mesh (Géométrie, nouveau trois.MeshNormalMaterial ()); scene.add (objet);}Notez que nous utilisons le maillot matériau normal , de sorte que la couleur de chaque face du cube est liée à la direction face à ce visage, ce qui facilite l'observation / le débogage.
Dans cette simple démo, je ne prévois pas d'ajouter des effets légers et d'ombre, et le matériau normal ne répond pas à la lumière.
Enfin, créez une boucle d'animation
function render () {requestAnimationFrame (render); object.rotation.x + = 0,05; object.rotation.y + = 0,05; renderer.render (scène, appareil photo);}Chaque repeinte fait tourner le cube un peu.
Lorsque la page se charge, appelez simplement les fonctions précédentes
fonction threestart () {initRenderer (); initCamera (); initscene (); InitObject (); render ();} window.onLoad = threestart ();La démo complète ressemble à ceci:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> cube </ title> <script src = "http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"> </javanli html, corps {marge: 0; rembourrage: 0; } #three_canvas {position: absolue; Largeur: 100%; hauteur: 100%; } </ style> </ head> <body> <canvas id = "trois_canvas"> </ canvas> <script> var rendu, caméra, scène, lumière, objet; Largeur var, hauteur; fonction initRenderer () {width = document.getElementById ('trois_canvas'). ClientWidth; height = document.getElementById ('trois_canvas'). ClientHeight; renderer = new Three.WebglRenderer ({canvas: document.getElementById ('trois_canvas')}); Renderer.SetSize (largeur, hauteur); renderer.setClearColor (0xfffff, 1.0); } fonction initCamera () {caméra = new Three.othographicCamera (largeur / -2, largeur / 2, hauteur / 2, hauteur / -2, 1, 1000); caméra.position.x = 0; caméra.position.y = 0; caméra.position.z = 200; caméra.up.x = 0; caméra.up.y = 1; caméra.up.z = 0; caméra.lookat ({x: 0, y: 0, z: 0}); } fonction initsCene () {scene = new Three.Scene (); } fonction initObject () {var geometry = new Three.CubeGeometry (100, 100, 100); objet = new Three.Mesh (Géométrie, nouveau trois.MeshNormalMaterial ()); scene.add (objet); } fonction render () {requestAnimationFrame (render); object.rotation.x + = 0,05; object.rotation.y + = 0,05; renderer.render (scène, appareil photo); } fonction threestart () {initRenderer (); initCamera (); initscene (); InitObject (); rendre(); } window.onload = threestart (); </cript> </ody> </html>Après avoir enregistré en tant que HTML, ouvrez-le, un tel cube rotatif sera affiché au centre de l'écran.
résumé
C’est tout pour l’introduction de trois.js. Cet article mentionne essentiellement des composantes importantes en trois. En fait, il y a beaucoup de choses que je veux résumer, mais les écrire dans cet article peut sembler lourde. L'intention initiale de cet article est de permettre aux lecteurs d'avoir une compréhension intuitive et générale de trois.js après l'avoir lue, et n'entend pas impliquer trop de détails.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.