Vorwort
Three.js ist eine 3DJS -Bibliothek, eines der hervorragendsten WebGL Open Source -Frameworks. Neben WebGL bietet drei.js auch einen Renderer, der auf Leinwand- und SVG -Tags basiert. Es wird empfohlen, Chrome oder Firefox zum Debuggen zu verwenden.
1. Kamera
Die Kamera in Grafik definiert, wie dreidimensionaler Raum zu zweidimensionalen Bildschirmen projiziert werden.
Bei Projektionsmethoden werden Kameras in orthogonale Projektionskameras und Perspektivprojektionskameras unterteilt.
2. Der Unterschied und der Anwendungsbereich der beiden Kameras
Orthogonale Projektion:
Perspektive Projektion:
Die orthogonale Projektion ist wie ein in Mathematikunterricht abgebildeter; Während die Perspektivprojektion einen Grundpunkt hat, dh, sind Objekte in der Ferne kleiner als Objekte in der Nähe und in der Nähe größer und kleiner.
Zum Zeichnen und Modellierungssoftware wird normalerweise eine orthogonale Projektion verwendet. Für die meisten anderen Anwendungen wird normalerweise eine Perspektivprojektion verwendet.
3. orthogonale Projektionskamera
Der Konstruktor einer orthogonalen Projektionskamera:
Drei.OTHOgraphicCamera (links, rechts, oben, unten, in der Nähe, weit)
Die sechs Parameter repräsentieren die Positionen der sechs von der orthogonalen Projektionskamera erfassten Gesichter.
Unter ihnen repräsentiert in der Nähe den vertikalen Abstand zwischen der Nahebene und dem Mittelpunkt der Kamera ; weit repräsentiert den vertikalen Abstand zwischen der fernen Ebene und dem Mittelpunkt der Kamera .
Um das horizontale und vertikale Verhältnis der Kamera aufrechtzuerhalten , muss das Verhältnis von (rechts links) zu (Top-Bottom) mit dem Seitenverhältnis von Leinwand übereinstimmen.
Wie aus der Abbildung ersichtlich ist, sollten die Werte von nah und fern positiv und weit entfernt sein. Wenn die letzten beiden Werte (0, 0), das heißt, die Werte in der Nähe und weit sind gleich, die Tiefe des Betrachungskörpers ist verschwunden und der gesamte Betrachtungskörper wird in eine Ebene gedrückt, die Anzeige ist falsch.
4. orthogonales Projektionskamera Beispiel
Quellcode:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test 2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> <script = "script/javascript" type = "text/javaScript"> function init () {var renderer = new Three.Webglrenderer ({Canvas: document.getElementById ('Maincanvas')}); Renderer.SetClearcolor (0x0000000); var scene = new Three.scene (); // Einstellen Sie die Kamera var camera = new Three.OtographicCamera (-2, 2, 1,5, -1,5, 1, 10); camera.position.set (0, 0, 5); //camera.lookat(new Three.Vector3 (0, 0, 0)); Szene.Add (Kamera); // Erstellen Sie einen Cube var cube = new Three.mesh (neue drei.CubeGeometry (1, 1, 1), neue drei.meshbasicmaterial ({Farbe: 0xff0000, Wireframe: true})); Szene.Add (Cube); // Render Renderer.render (Szene, Kamera); } </script> </body> </html> Wenn die Wireframe -Eigenschaft von THREE.MeshBasicMaterial .
Sie können sehen, dass die Kante hinter der aktuellen Position vollständig mit dem vorne übereinstimmt:
4.1 Ändern Sie das Verhältnis von Länge und Breite der Ansicht
Hier beträgt das Seitenverhältnis von Leinwand 4: 3, der horizontale Abstand der Kamera 4 und der vertikale Abstand 3 beträgt, sodass das Längen- und Breitenverhältnis unverändert bleibt (1: 1).
Wenn der horizontale Abstand der Kamera auf 2 reduziert ist,
var camera = new Three.OtographicCamera (-1,1,1,5, -1,5,1,10);
Objekte werden verlängert:
Das Sichtfeld der Kamera ist enger geworden, was zu einer Zunahme des seitlichen Anteils des Würfels im Sichtfeld führt, das sich als Erweiterung des Würfels manifestiert.
4.2 Ändern Sie die Kameraposition
Die Kameraposition im Beispiel ist (0,0,5). Da die Kamera standardmäßig in die negative Richtung der Z-Achse platziert ist, können Sie den Würfel am Ursprung sehen.
Bewegen Sie die Kameraposition um 1 Einheit nach rechts:
var camera = new Three.OtographicCamera (-2,2,1,5, -1,5,1,10); camera.position.set (1,0,5);
Die Kamera sieht sich dem Objekt aus, sodass sich die Kamera nach rechts bewegt und das beleuchtete Objekt links bewegt:
4.3 Ändern Sie die Position der Ansicht
Stellen Sie die Ansicht nach rechts fest:
var camera = new Three.OtographicCamera (-1,3,1,5, -1,5,1,10); camera.position.set (1,0,5);
Genau wie die Kamera nach rechts.
4.4 Ändern Sie den Kamerawinkel
camera.position.set (4, -3,5); camera.lookat (neue drei.Vector3 (0, 0, 0));
Aber jetzt beobachtet die Kamera entlang der negativen Richtung der Z-Achse, sodass der Würfel nicht beobachtet werden kann, nur ein Stück Schwarz ist zu sehen. Wir können die Richtung des Ursprungs durch die Lookat -Funktion angeben:
camera.lookat (neue drei.Vector3 (0, 0, 0));
Beachten camera.lookAt(0, 0, 0) , dass lookAt -Funktion eine Instanz von THREE.Vector3 annimmt.
Okay, das obige ist der gesamte Inhalt der orthogonalen Projektionskamera von drei. Js. Ich hoffe, es wird für alle hilfreich sein, drei.js zu lernen. Der Editor wird nacheinander Artikel über drei.js aktualisieren. Bitte achten Sie weiterhin wulin.com.