Vorwort
Der Herausgeber hat zuvor über geometrische Formen und Materialien veröffentlicht. Ich glaube, nachdem Sie gelesen und gelernt haben, können wir sie verwenden, um Objekte zu erstellen. Das am häufigsten verwendete Objekt ist ein Netz, ein Objekt, das aus Scheitelpunkten, Kanten, Gesichtern usw. besteht; Andere Objekte umfassen Liniensegmente, Knochen, Partikelsysteme usw. Um ein Objekt zu erstellen, müssen Sie die geometrische Form und das Material angeben. Unter ihnen bestimmt die geometrische Form die Position des Scheitelpunkts und anderer Informationen des Objekts, und das Material bestimmt die Farbe, Textur und andere Informationen des Objekts.
1. Erstellen Sie ein Raster
In den vorherigen Artikeln haben wir gelernt, wie man geometrische Formen und Materialien erstellt, und ein Netz zu schaffen, ist sehr einfach. Übergeben Sie einfach die geometrischen Formen und Materialien in seinen Konstruktor. Das am häufigsten verwendete Objekt ist ein Netz, das eine Geometrie mit Punkten, Linien und Oberflächen darstellt. Sein Konstruktor ist:
Netz (Geometrie, Material)
Lassen Sie uns hier lernen, wie Sie ein Raster mit einem bestimmten Beispiel erstellen:
var materials = new Three.MesHlambertMaterial ({color: 0xffff00}); var Geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.mesh (Geometrie, Material); Szene.Add (Mesh);Wenn Material und Geometrie danach nicht wiederverwendet werden, können sie auch zusammen geschrieben werden wie bei:
var mesh = new Three.mesh (neue drei.CubeGeometry (1, 2, 3), neue drei.MeshambertMaterial ({color: 0xffff00})); Szene.Add (Mesh);Nach dem Hinzufügen von Beleuchtung ist das Ergebnis:
Wenn nicht Material angegeben ist, wird ein Material mit echtem Wireframe jedes Mal zufällig zugeordnet. Die Farbe nach dem Auffrischen der Seite ist anders. Ein möglicher Effekt ist:
Quellcode:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test 9.1 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas" <script type = "text/javaScript"> Funktion init () {var renderer = new Three.Webglrenderer ({canvas: document.getElementById ('Maincanvas')}); Renderer.SetClearcolor (0x0000000); var scene = new Three.scene (); // Kamera var camera = new Three.OtographicCamera (-2,5, 2,5, 1,875, -1,875, 0,1, 100); camera.position.set (5, 5, 20); camera.lookat (neue drei.Vector3 (0, 0, 0)); Szene.Add (Kamera); var materials = new Three.MesHlambertMaterial ({Farbe: 0xffff00}); // var materials = new Three.Meshbasicmaterial ({// Farbe: 0xffff00, // Wireframe: true //}); var geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.mesh (Geometrie, Material); szene.add (mesh); var light = new Three.DirectionAllight (0xffffff); Light.Position.Set (20, 10, 5); Szene.Add (Licht); // Render Renderer.render (Szene, Kamera); } </script> </html>2. Eigenschaften ändern
2.1 das Material ändern
Zusätzlich zur Angabe des Materials im Konstruktor kann das Material auch nach dem Erstellen des Netzes modifiziert werden:
var materials = new Three.MesHlambertMaterial ({Farbe: 0xffff00}); var Geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.mesh (Geometrie, Material); szene.add (mesh); mesh.material = new Three.MesHlambertMaterial ({Farbe: 0xff0000});Die endgültige Farbe ist rot:
Quellcode:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas" <script type = "text/javaScript"> Funktion init () {var renderer = new Three.Webglrenderer ({canvas: document.getElementById ('Maincanvas')}); Renderer.SetClearcolor (0x0000000); var scene = new Three.scene (); // Kamera var camera = new Three.OtographicCamera (-2,5, 2,5, 1,875, -1,875, 0,1, 100); camera.position.set (5, 5, 20); camera.lookat (neue drei.Vector3 (0, 0, 0)); Szene.Add (Kamera); var materials = new Three.MesHlambertMaterial ({Farbe: 0xffff00}); var geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.mesh (Geometrie, Material); szene.add (mesh); mesh.material = new Three.MesHlambertMaterial ({Farbe: 0xff0000}); var light = new Three.DirectionAllight (0xffffff); Light.Position.Set (20, 10, 5); Szene.Add (Licht); // Render Renderer Renderer.render (Szene, Kamera); } </script> </html>2.2 Position, Zoom, Rotation
Position, Skalierung und Rotation sind drei häufige Eigenschaften von Objekten. Da drei.mesh auf drei.Object3d basiert, enthält es drei Attribute: Skalierung, Rotation und Position. Sie sind alle drei.
Drei.Vector3 hat drei Attribute: x, y und z. Wenn Sie nur eines der Attribute festlegen, können Sie die folgende Methode verwenden:
mesh.position.z = 1;
Wenn Sie gleichzeitig mehrere Eigenschaften festlegen müssen, können Sie die folgenden zwei Methoden verwenden:
mesh.position.set (1,5, -0,5, 0);
oder:
mesh.position = new Three.Vector3 (1,5, -0,5, 0);
Das entsprechende Attribut der Skalierung ist skaliert, und das entsprechende Drehattribut der Rotation ist die Rotation. Die spezifische Methode entspricht dem obigen Beispiel, das die Skalierung oder Drehung entlang der drei Achsen x, y und z angibt.
Quellcode:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.3 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas" <script type = "text/javaScript"> Funktion init () {var renderer = new Three.Webglrenderer ({canvas: document.getElementById ('Maincanvas')}); Renderer.SetClearcolor (0x0000000); var scene = new Three.scene (); // Kamera var camera = new Three.OtographicCamera (-2,5, 2,5, 1,875, -1,875, 0,1, 100); camera.position.set (5, 5, 20); camera.lookat (neue drei.Vector3 (0, 0, 0)); Szene.Add (Kamera); var materials = new Three.MesHlambertMaterial ({Farbe: 0xffff00}); var geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.mesh (Geometrie, Material); szene.add (mesh); mesh.position.set (1,5, -0,5, 0); mesh.position = new Three.Vector3 (1,5, -0,5, 0); mesh.position.z = 1; var light = new Three.DirectionAllight (0xffffff); Light.Position.Set (20, 10, 5); Szene.Add (Licht); Drawaxes (Szene); // Render Renderer.render (Szene, Kamera); } function drawaxes (szene) {// x-axis var xgeo = new Three.Geometry (); xgeo.vertices.push (neue drei.Vector3 (0, 0, 0)); xgeo.vertices.push (neue drei.Vector3 (1, 0, 0)); var xmat = new Three.LineBasicmaterial ({Farbe: 0xff0000}); var xaxis = new Three.Line (xgeo, xmat); szene.add (xaxis); // y-achse var ygeo = new Three.Geometry (); ygeo.vertices.push (neue drei.Vector3 (0, 0, 0)); ygeo.vertices.push (neue drei.Vector3 (0, 1, 0)); var ymat = new Three.LineBasicmaterial ({Farbe: 0x00ff00}); var yaxis = new Three.Line (ygeo, yMat); szene.add (yaxis); // Z-Achse var zgeo = new Three.Geometry (); zgeo.vertices.push (neue drei.Vector3 (0, 0, 0)); zgeo.vertices.push (neue drei.Vector3 (0, 0, 1)); var zmat = new Three.LineBasicmaterial ({Farbe: 0x00ccff}); var zaxis = new Three.Line (Zgeo, zmat); Szene.Add (Zaxis); } </script> </html>Der Inhalt dieses Artikels endet hier. Der Artikel führt das Netz in drei.Js durch detaillierte Beispiele und Bilder vor. Ich hoffe, dieser Artikel wird für alle hilfreich sein, um drei.js zu lernen.