1. Textform
Apropos 3D -Text, ich erinnere mich in meinen frühen Jahren an einige künstlerische Wörter in Wort:
Anschließend kann TextGeometry verwendet werden, um dreidimensionale Textformen zu erstellen.
Das Verwenden von Textformen erfordert das Herunterladen und Zitieren zusätzlicher Schriftbibliotheken. Nehmen wir hier als Beispiel die helvetiker -Schriftart.
Zitat:
<script type = "text/javaScript" src = "Ihr Pfad/Helvetiker_regular.typeface.json"> </script>
Der Konstruktor der Textgeometrie lautet:
Drei.Textgeometrie (Text, Parameter)
Text ist eine wörtliche Zeichenfolge;
Parameter sind Objekte, die aus den folgenden Parametern bestehen:
・ Größe: Schriftgröße, im Allgemeinen die Höhe der Großbuchstaben
・ Höhe: Die Dicke des Textes
・ Curvesegmente: Die Anzahl der ARC -Segmente macht die Kurve des Textes reibungsloser
・ Schriftart: Schriftart, Standardeinstellung ist 'Helvetiker' und die Schriftdatei, auf die verwiesen werden muss
・ Gewicht: Der Wert ist "normal" oder "fett", was angibt, ob er dicker ist
・ Stil: Der Wert ist "normal" oder "kursiv", was zeigt, ob Kursivschrift Kursivika ist
°
・ Bevelthickness: Dicke der Schubdicke
・ Harmrose: Schalbbreite
Erstellen Sie einen dreidimensionalen Text: new THREE.TextGeometry('Hello', {size: 1, height: 1})， sein Effekt ist:
Materialien und Beleuchtung können angemessen angepasst werden, um den gewünschten Effekt zu erzielen:
// Metall Shining Object var Material = new Three.meshphongmaterial ({Farbe: 0xffff00, spekuliert: 0xffff00, // die Helligkeit des Materials und die Farbe des Highlight -Teils angeben. 30}); // Directional Light var light = new Three.DirectionAllight (0xffffff); light.position.set (-5, 10, 5); Szene.Add (Licht);Quellcode:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test sechs </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script = "text/javascript" src = " <!-Weitere Informationen finden Sie unter https://github.com/mrdoob/three.js/tree/master/examples/fonts-> <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 (1, 0, 0)); Szene.Add (Kamera); // var materials = new Three.meshbasicmaterial ({// Farbe: 0xffff00, // Wireframe: true //}); // Metall Shining Object var Material = new Three.meshphongmaterial ({Farbe: 0xffff00, spiegelig: 0xffff00, // Geben Sie die Helligkeit des Materials und die Farbe des Highlight-Teils an. Wenn Sie auf dieselbe Farbe wie die Farbeigenschaft eingestellt sind, wird ein weiteres Metall-ähnliches Material erhalten. Wenn Sie grau gegrau sind, wird das Helligkeitswert aussieht. }); // Direction Light var light = new Three.DirectionAllight (0xffffff); Light.Position.Set (-5, 10, 5); Szene.Add (Licht); // Schriftart var lader = new Three.Fontloader () laden; loader.load('./helvetiker_regular.typeface.json', function(font) { var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', { font: font, size: 1, height: 1 }), material); scene.add(mesh); // render renderer.render(scene, camera); }); } </script> </html>2. Gewohnte Formen
Für Formen, die nicht von drei.Js bereitgestellt werden, können benutzerdefinierte Formen erstellt werden.
Da benutzerdefinierte Formen eine manuelle Spezifikation jeder Scheitelpunktposition und jeder Scheitelpunktverbindung erfordern, sind die Berechnungen des Programmierers relativ groß. In diesem Fall wird empfohlen, ein Modell in einer Modellierungssoftware wie 3DS Max zu erstellen und es dann mit drei.js in die Szene zu importieren, was effizienter und bequemer ist.
Benutzerdefinierte Formen verwenden die Geometry , die übergeordnete Klasse anderer geometrischer Formen wie CubeGeometry , SphereGeometry usw., und sein Konstruktor ist:
THREE.Geometry()
Initialisieren Sie eine Geometrie und setzen Sie dann den Status der Scheitelpunktposition und des Vertex -Verbindungsstatus:
Quellcode:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <title> 3.js test sechs-zwei </title> </head> <body onload = "init ()> <canvas id =" maincanvas " type = "text/javaScript"> function init () {var renderer = new Three.Webglrenderer ({Canvas: document.getElementById ('Maincanvas')}); Renderer.SetClearcolor (0x0000000); var scene = new Three.scene (); // Kamera var camera = new Three.OtographicCamera (-5, 5, 3,75, -3,75, 0,1, 100); camera.position.set (25, 25, 25); camera.lookat (neue drei.Vector3 (0, 0, 0)); Szene.Add (Kamera); var materials = new Three.Meshbasicmaterial ({Farbe: 0xffff00, Wireframe: true}); // Geometrie var geometry = new Three.Geometry () initialisieren; // Vertex -Position einstellen // Top 4 Eckices Geometry.vertices.push (neue drei.Vector3 (-1, 2, -1)); Geometry.vertices.push (neue drei.Vector3 (1, 2, -1)); Geometry.vertices.push (neue drei.Vector3 (1, 2, 1)); Geometry.vertices.push (neue drei.Vector3 (-1, 2, 1)); Geometry.vertices.push (neue drei.Vector3 (-1, 2, 1)); Geometry.vertices.push (neue drei.Vector3 (-1, 2, 1)); Geometry.vertices.push (neue drei.Vector3 (-1, 2, 1)); Geometry.vertices.push (neue drei.Vector3 (-1, 2, 1)); // Die unteren 4 Scheitelpunkte Geometry.vertices.push (neue drei.Vektor3 (-2, 0, -2)); Geometry.vertices.push (neue drei.Vector3 (2, 0, -2)); Geometry.vertices.push (neue drei.Vector3 (2, 0, 2)); Geometry.vertices.push (neue drei.Vector3 (2, 0, 2)); Geometry.vertices.push (neue drei.Vector3 (-2, 0, 2)); // Vertex -Verbindungsstatus einstellen // obere Geometrie.Faces.push (neue drei.face3 (0, 1, 3)); Geometry.Faces.push (neue drei.face3 (1, 2, 3)); // Geometry.Faces.push (neue drei.face4 (0, 1, 2, 3)); // BOTOSE GEOMetry.Faces.push (neue drei.face3 (4, 5, 6)); Geometry.Faces.push (neue drei.face3 (5, 6, 7)); // Geometry.Faces.push (neue drei.face4 (4, 5, 6, 7)); // Side Geometry.Faces.push (neue drei.face3 (1, 5, 6)); Geometry.Faces.push (neue drei.face3 (6, 2, 1)); Geometry.Faces.push (neue drei.face3 (2, 6, 7)); Geometry.Faces.push (neue drei.face3 (7, 3, 2)); Geometry.Faces.push (neue drei.face3 (3, 7, 0)); Geometry.Faces.push (neue drei.face3 (7, 4, 0)); Geometry.Faces.push (neue drei.face3 (0, 4, 5)); Geometry.Faces.push (neue drei.face3 (0, 4, 5)); Geometry.Faces.push (neue drei.face3 (0, 4, 5)); Geometry.Faces.push (neue drei.face3 (0, 5, 1)); // // Gesicht, die aus vier Scheitelpunkten besteht // Geometry.Faces.push (neue drei.face4 (0, 1, 5, 4)); // Geometry.Faces.push (neue drei.face4 (1, 2, 6, 5)); // Geometry.Faces.push (neue drei.face4 (2, 3, 7, 6)); // Geometry.Faces.push (neue drei.face4 (3, 0, 4, 7)); var mesh = new Three.mesh (Geometrie, Material); szene.add (mesh); // Render Renderer.render (Szene, Kamera); } </script> </html> Es ist zu beachten, dass new THREE.Vector3(-1, 2, -1) einen Vektor erstellen, der an geometry.vertices angehängt wird.vertices Array als Scheitelpunktpositionen.
Und ein Gesicht, das aus drei Scheitelpunkten besteht geometry.faces wird von new THREE.Face3(0, 1, 2) erstellt. Die drei Parameter sind die Sequenznummern der drei Eckpunkte in geometry.vertices . Wenn Sie ein Patch aus vier Scheitelpunkten festlegen müssen, können Sie in ähnlicher Weise THREE.Face4 verwenden. Face4.
// obere Geometrie.Faces.push (neue drei.face4 (0, 1, 2, 3)); // Bodengeometrie.Faces.push (neue drei.face4 (4, 5, 6, 7)); // vier Seiten Geometrie.Faces.push.push (New Three.face4 (0, 1, 5, 4). 5)); Geometry.Faces.push (neue drei.face4 (2, 3, 7, 6)); Geometry.Faces.push (neue drei.face4 (2, 3, 7, 6)); Geometry.Faces.push (neue drei.face4 (3, 0, 4, 7));
Das obige ist der gesamte Inhalt der drei.Js -Lerntextformen und benutzerdefinierten Formen, die vom Editor zusammengestellt wurden. Der Herausgeber hat auch mehrere verwandte Artikel über drei.Js zusammengestellt. Wenn Sie es benötigen, können Sie es über die Links der relevanten Artikel unten anzeigen. Ich hoffe, es kann jedem helfen, der drei.js lernt.