Drei.js ist ein 3D -Motor im Browser. Sie können es verwenden, um verschiedene dreidimensionale Szenen zu erstellen, darunter Kameras, Licht und Schatten, Materialien und andere Objekte. Sie können viele wundervolle Demonstrationen auf seiner Homepage sehen. Dieser Motor befindet sich jedoch noch in einem relativ unreifen Entwicklungsstadium. Die unzureichende API und die mangelnde Dokumentation haben die Schwierigkeit des Lernens für Anfänger erhöht (insbesondere die mangelnde Dokumentation). Der Code von drei.Js wird auf GitHub gehostet.
http://github.com/mrdoob/three.js/
Schauen wir uns das Beispiel an
<! DocType html> <html> <kopf> <meta charset = "utf-8"/> <title> </title> </head> <script type = "text/javascript" src = "js/drei.js"> </script> <Styles Cursor: Zeiger; Breite: 100%; Höhe: 600px; Hintergrundfarbe: #eeeeeee; } </style> <script> var renderer; function inithree () {width = document.getElementById ('Canvas-Frame'). Clientwidth; height = document.getElementById ('Canvas-Frame'). clientHeight; // Der Renderer bestimmt das Rendering -Ergebnis und welches Element auf der Seite gezeichnet werden soll und wie man es zeichnet. renderer = new Three.Webglrenderer ({Antialias: true}); renderer.setSize (Breite, Höhe); // Domelement repräsentiert die Leinwand im Renderer, und alle Renderings werden auf dem Dokument gezeichnet. Renderer.SetClearcolor (0xfffff, 1.0); } // Kamera Perspektive Kamera var Kamera; function initcamera () {camera = new Three.PerspectiveCamera (45, Breite/Höhe, 1.10000); camera.position.x = 0; camera.position.y = 1000; camera.position.z = 0; camera.up.y = 0; camera.up.y = 0; camera.up.z = 1; camera.lookat ({x: 0, y: 0, z: 0}); } // Szene var szene; Funktion initscene () {szene = new Three.scene (); } // Light var Light; Funktion initlight () {light = new Three.DirectionAllight (0xff0000, 1.0, 0); Light.Position.Set (100, 100, 200); Szene.Add (Licht); } // Geometrie var Cube; Funktion initObject () {// Deklarierte Geometrie gibt es einen Scheitelpunktparameter, mit dem die Punkte var geometry = new Three.Geometry () gespeichert werden kann; // lineBasicmaterial (Parameter) // Grundübersetzung: Basic // Materialübersetzung: Rohstoffe // Parameter: ist ein Objekt, das das Erscheinungsbild eines Materials definiert. Es enthält mehrere Attribute, um das Material zu definieren. Diese Attribute sind // Translation: Parameter // Farbe: Die in hexadezimal dargestellte Farbe der Linie und die Standardfarbe ist weiß. // Linewidth // Linie: Das Erscheinungsbild beider Enden der Linie ist standardmäßig abgerundet. Der Effekt ist nur zu sehen, wenn die Linie dicker ist. // CAP -Übersetzung: Hat // LineJoin: Das Erscheinen des Verbindungspunkts zwischen zwei Zeilen, standardmäßig abgerundete Ecken. // Übersetzung anschließen: Hinzugefügt // Vertexcolors: Definieren Sie, ob das Linienmaterial Scheitelpunktelemente verwendet, dies ist ein boolescher Wert. Dies bedeutet, dass die Farben jedes Teils der Linie gemäß der Farbe des Scheitelpunkts interpoliert werden. // Vertex -Übersetzung: Vertex // Nebel: Definiert, ob die Farbe des Materials durch den globalen Nebelffekt beeinflusst wird. // Übersetzung: FOG var materials = new Three.lineBasicmaterial ({vertexcolors: true}); // Definieren Sie die beiden Farben, die die Farben der beiden Endpunkte sind var color1 = new Three.Color (0x4444444), color2 = new Three.Color (0xff0000); // Das Material der Linie kann durch die Farbe der beiden Punkte ermittelt werden var p1 = new Three.Vector3 (); var p2 = new Three.Vector3 (); p1.set (-100,0,100); p2.set (100,0, -100); Geometry.vertices.push (P1); Geometry.vertices.push (p2); Geometry.Colors.push (color1, color2); // Definieren Sie die Linie und drei Parameter werden hier übergeben // Die erste ist die Geometriegeometrie, die zwei Eckpunkte und Scheitelpunktfarben enthält // Das zweite ist das Material der Linie // Die dritte ist die Verbindungsmethode einer Gruppe von Punkten var line = new drei.line (Geometrie, Material, drei.Linepieces); // Zeilen zur Szene hinzufügen. } function threestart () {initHee (); initcamera (); Initscene (); initlight (); initObject (); renderer.clear (); Renderer.Render (Szene, Kamera); } </script> <body onload = "threestart ()"> <div id = "canvas-frame"> </div> </body> </html>Ich hoffe, dieses Beispiel kann Ihnen helfen, drei.js zu lernen