Three.js est un moteur 3D fonctionnant dans le navigateur. Vous pouvez l'utiliser pour créer différentes scènes tridimensionnelles, y compris les caméras, la lumière et l'ombre, les matériaux et autres objets. Vous pouvez voir de nombreuses manifestations merveilleuses sur sa page d'accueil. Cependant, ce moteur est toujours à un stade de développement relativement immature. Son API insuffisante et son manque de documentation ont augmenté la difficulté d'apprendre pour les débutants (en particulier le manque de documentation). Le code Three.js est hébergé sur GitHub.
http://github.com/mrdoob/three.js/
Regardons l'exemple
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <title> </ title> </ head> <script type = "text / javascript" src = "js / trois.js"> </ script> <y style> div # canvas-frame {border: nothe; curseur: pointeur; Largeur: 100%; Hauteur: 600px; Color d'arrière-plan: #eeeeee; } </ style> <script> var renderer; fonction initThree () {width = document.getElementById ('Canvas-Frame'). ClientWidth; height = document.getElementById ('Canvas-Frame'). ClientHeight; // Le rendu détermine le résultat de rendu et quel élément doit être dessiné sur la page et comment le dessiner. renderer = new Three.WebglRenderer ({Antialias: true}); Renderer.SetSize (largeur, hauteur); // Domement représente le canevas dans le rendu, et tous les rendus sont dessinés sur le document.getElementById ('Canvas-Frame'). APPENDCHILD (Renderer.DomElement); renderer.setClearColor (0xfffff, 1.0); } // caméra de la caméra caméra caméra var; fonction initCamera () {caméra = new Three.PerspectiveCamera (45, largeur / hauteur, 1 10000); caméra.position.x = 0; caméra.position.y = 1000; caméra.position.z = 0; caméra.up.y = 0; caméra.up.y = 0; caméra.up.z = 1; caméra.lookat ({x: 0, y: 0, z: 0}); } // scène var scène; function initsCene () {scene = new Three.Scene (); } // lumière var lumière; fonction initlight () {Light = new Three.DirectionAllight (0xff0000, 1.0, 0); Light.Position.set (100, 100, 200); scene.add (lumière); } // Géométrie var cube; fonction initobject () {// Géométrie déclarée, il existe un paramètre de sommets qui peut être utilisé pour stocker le point var géométrie = new Three.Geometry (); // lineBasicMaterial (paramètres) // Traduction de base: Basic // Traduction du matériau: matières premières // Paramètres: est un objet qui définit l'apparition d'un matériau. Il contient plusieurs attributs pour définir le matériau. Ces attributs sont // traduction: paramètres // couleur: la couleur de la ligne, représentée en hexadécimal, et la couleur par défaut est blanche. // lineWidth // lineCap: l'apparence des deux extrémités de la ligne est par défaut. L'effet ne peut être vu que lorsque la ligne est plus épais. // Cap Translation: Hat // Linejoin: l'apparence du point de connexion entre deux lignes, les coins arrondis par défaut. // Traduction de jointure: ajouté // vertexColors: Définissez si le matériau de ligne utilise des éléments de sommet, il s'agit d'une valeur booléenne. Cela signifie que les couleurs de chaque partie de la ligne sont interpolées en fonction de la couleur du sommet. // Traduction du sommet: Vertex // FOG: Définit si la couleur du matériau est affectée par l'effet de brouillard global. // Traduction: Fog var Material = new Three.LineBasicMaterial ({vertexColors: true}); // Définissez les deux couleurs qui sont les couleurs des deux points de terminaison var Color1 = new Three.Color (0x4444444), Color2 = new Three.Color (0xFF0000); // Le matériau de la ligne peut être déterminé par la couleur des deux points var p1 = new Three.vector3 (); var p2 = new trois.vector3 (); p1.set (-100,0,100); p2.set (100,0, -100); Geometry.vertices.push (P1); geometry.vertices.push (p2); Geometry.colors.push (Color1, Color2); // définir la ligne et trois paramètres seront passés ici // Le premier est la géométrie de la géométrie, qui contient deux sommets et couleurs de sommet // Le second est le matériau de la ligne // Le troisième est la méthode de connexion d'un groupe de points Var Line = new Three.line (géométrie, matériau, trois. // Ajouter des lignes à la scène.add (ligne); } fonction threestart () {initTHree (); initCamera (); initscene (); initlight (); InitObject (); renderer.clear (); renderer.render (scène, appareil photo); } nousJ'espère que cet exemple peut vous aider à apprendre trois.js