👎🏼 🎦 🤲🏾 Einführung in 3D: Three.js Basics 💉 👗 🎆

Die Komplexität des Web ändert sich täglich und seine Funktionen wachsen ebenso schnell, insbesondere beim 3D-Rendering. Wer gerade anfängt, sich dem 3D-Thema anzuschließen - willkommen bei cat.

Lass uns von weitem gehen

WebGL ist eine Softwarebibliothek für JavaScript, mit der Sie 3D-Grafiken erstellen können, die in Browsern funktionieren. Diese Bibliothek basiert auf der Architektur der OpenGL-Bibliothek. WebGL verwendet die Programmiersprache GLSL- Shader mit C-ähnlicher Syntax. WebGL ist insofern interessant, als der Code direkt im Browser modelliert wird. Zu diesem Zweck verwendet WebGL das in HTML5 eingeführte Canvas- Objekt .

Die Arbeit mit WebGL und insbesondere mit Shadern ist ein ziemlich zeitaufwändiger Prozess. Im Entwicklungsprozess ist es notwendig, jeden Punkt, jede Linie, jedes Gesicht usw. zu beschreiben. Um all dies zu visualisieren, müssen wir einen ziemlich umfangreichen Code registrieren. Um die Entwicklungsgeschwindigkeit zu erhöhen, wurde die Three.js- Bibliothek entwickelt .

Three.js ist eine JavaScript-Bibliothek, die eine Reihe vordefinierter Klassen zum Erstellen und Anzeigen interaktiver 3D-Grafiken in WebGL enthält.

Three.js für WebGL ist dasselbe wie jQuery für JavaScript. Die Bibliothek bietet deklarative Syntax und Abstracts zu den mit 3D verbundenen Kopfschmerzen im Browser. Lassen Sie uns einen allgemeinen Überblick geben und sehen, wie Sie beginnen, wenn Sie neu in der 3D-Welt sind.

Mehr zu Three.js

Die Three.js-Bibliothek erleichtert, wie bereits erwähnt, die Arbeit mit WebGL. Bei Verwendung von Three.js müssen keine Shader geschrieben werden (die Möglichkeit bleibt jedoch bestehen), und es wird möglich, mit bekannten Konzepten zu arbeiten.

Eine große Anzahl von Entwicklern arbeitet an der Bibliothek. Der Hauptideologe und Entwickler ist Ricardo Cobello, bekannt unter dem kreativen Pseudonym Mr.Doob .

Das Modellieren von Grafiken mit Three.js kann mit dem Set verglichen werden, da wir die Möglichkeit haben, mit Konzepten wie Szene, Licht, Kamera, Objekten und deren Materialien zu arbeiten.

Drei sogenannte Three.js-Wale sind:

Szene - eine Art Plattform, auf der alle von uns erstellten Objekte platziert werden.
Kamera - in der Tat - dies ist das „Auge“, das auf die Szene gerichtet wird. Die Kamera nimmt Objekte auf und zeigt sie an, die sich auf der Bühne befinden.
Renderer - Ein Visualizer, mit dem Sie eine von der Kamera aufgenommene Szene anzeigen können.

Three.js hat verschiedene Arten von Kameras:

Perspektivische Kamera
Stereokamera
Orthographische Kamera
Würfelkamera

Die gebräuchlichsten sind die Perspektivkamera und die orthografische Kamera.

Perspektivische Kamera

Dies ist der am häufigsten verwendete Projektionsmodus zum Rendern einer 3D-Szene.

Die perspektivische Kamera soll simulieren, was das menschliche Auge sieht. Die Kamera nimmt alle Objekte in einer perspektivischen Projektion wahr, dh je weiter das Objekt von uns entfernt ist, desto kleiner erscheint es.

Die perspektivische Kamera akzeptiert 4 Argumente:

FOV Field Of View (/ ) — , .
Aspect ratio — , , . . , , .
Near & Far — , . , , , .

Orthographic Camera

In diesem Projektionsmodus bleibt die Größe des Objekts im angezeigten Bild unabhängig von seiner Entfernung von der Kamera konstant. Das heißt, es ist eine Kamerafernbedienung in unendlicher Entfernung von Objekten.

In diesem Fall bleiben alle senkrechten Linien senkrecht, alle parallel - parallel. Wenn wir die Kamera bewegen, werden die Linien und Objekte nicht verzerrt.

Dies kann nützlich sein, wenn 2D-Szenen und UI-Elemente angezeigt werden.

Beleuchtung

Ohne Beleuchtung auf der Bühne haben Sie den Eindruck, dass Sie sich in einem dunklen Raum befinden. Wenn Sie die Bühne beleuchten, können Sie außerdem mehr Realismus erzielen. Technisch kann jede Beleuchtung auf Farbe eingestellt werden.

Beleuchtungsbeispiele:

Ambient Light — , ; , .
Directional Light — , . , , , , ; , .
Point Light — , . ( ).
Spot - Licht - das Licht wird von einem Punkt in eine Richtung emittiert wird , entlang eines Kegels, erweitert , wie Sie von der Lichtquelle weg bewegen.

Objekte auf der Bühne erstellen

Das auf der Bühne erstellte Objekt heißt Mesh.

Netz ist eine Klasse, die Objekte darstellt, die auf einem dreieckigen polygonalen Netz basieren.

Diese Klasse akzeptiert zwei Argumente:

Geometrie - beschreibt die Form (Position von Eckpunkten, Flächen, Radius usw.)
Material - beschreibt das Erscheinungsbild von Objekten (Farbe, Textur, Transparenz usw.)

Versuchen wir, zwei einfache Formen zu erstellen: einen Würfel und eine Kugel.

Gehen Sie zunächst zur Website three.js und laden Sie die neueste Version der Bibliothek herunter. Dann verbinden wir die Bibliothek im Kopfbereich oder mit dem Anfang des Hauptteils unseres Dokuments, und Sie sind fertig:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>First Three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
      </style>
  </head>
  <body>
    <script src="js/three.js"></script>
    <script>
      //  Javascript .
    </script>
  </body>
</html>

Damit wir das erstellte Objekt anzeigen können, müssen Sie eine Szene erstellen, eine Kamera hinzufügen und das Rendering konfigurieren.

Szene hinzufügen:

var scene = new THREE.Scene();

Fügen Sie eine perspektivische Kamera hinzu:

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

Die Kamera übernimmt 4 Parameter, die oben erwähnt wurden:

Blickwinkel oder FOV, in unserem Fall ist es ein Standardwinkel von 75;
der zweite Parameter ist das Seitenverhältnis oder Seitenverhältnis;
Der dritte und vierte Parameter sind der minimale und maximale Abstand von der Kamera, der in das Rendering fällt.

Fügen Sie das Rendering hinzu und konfigurieren Sie es:

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Was wir getan haben: Erstellen Sie zuerst ein Renderobjekt, stellen Sie dann seine Größe entsprechend der Größe des sichtbaren Bereichs ein und fügen Sie es schließlich der Seite hinzu, um ein leeres Canvas-Element zu erstellen, mit dem wir arbeiten werden.

Nach dem Erstellen des Renderings geben wir an, wo das Canvas- Tag angezeigt werden soll . In unserem Fall haben wir es dem Body- Tag hinzugefügt .

Um den Würfel selbst zu erstellen, legen wir zunächst die Geometrie fest:

var geometry = new THREE.BoxGeometry( 10, 10, 10);

Ein Cube wird mit der BoxGeometry- Klasse erstellt . Dies ist eine Klasse, die die Eckpunkte und Flächen eines Würfels enthält. Wir übertragen die Größen:

Breite : Würfelbreite, Größe der Seiten entlang der x-Achse
Höhe : Würfelhöhe, d.h. y-seitige Größe
Tiefe : Tiefe des Würfels, d.h. Seitengröße auf der Z-Achse

Um den Würfel zu färben, stellen Sie das Material ein:

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

In unserem Fall wird MeshBasicMaterial gesetzt und der Farbparameter 0x00ff00 wird übergeben , d.h. grüne Farbe. Dieses Material wird grundsätzlich verwendet, um der Figur eine einheitliche Farbe zu verleihen. Der Nachteil ist, dass die Figur in der Tiefe verschwindet. Dieses Material ist jedoch sehr nützlich, wenn Sie Drahtmodelle mit dem Parameter {wireframe: true} rendern .

Jetzt brauchen wir ein Mesh- Objekt , das Geometrie nimmt und Material darauf anwendet:

var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 25;

In Ineinander greifen , um die Szene und die Kamera zurück zu bewegen, da alle Objekte nach dem scene.add () Methode standardmäßig hinzugefügt werden mit den Koordinaten (0,0,0), durch die die Kamera und die Würfel an der gleichen Stelle sein wird.

Um den Cube zu animieren, müssen wir mit requestAnimationFrame alles in der Render-Schleife zeichnen :

function render() {
        requestAnimationFrame( render );
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;      
  renderer.render( scene, camera );
}
render();

requestAnimationFrame ist eine Anfrage an den Browser, dass Sie etwas animieren möchten. Wir übergeben ihm eine Funktion zum Aufrufen, dh die Funktion render ().

Hier stellen wir die Parameter der Drehzahl ein. Infolgedessen rendert die Schleife unsere Szene 60 Mal pro Sekunde und bewirkt, dass sich der Würfel dreht.

Zeichnen wir nun eine Kugel:

var geometry = new THREE.SphereGeometry(1, 32, 32);

Um eine Kugel zu erstellen, wird die SphereGeometry- Klasse verwendet , die sich um Folgendes kümmert:

Radius (Standardwert ist 1)
widthSegments - Die Anzahl der horizontalen Segmente (Dreiecke). Der Mindestwert ist 3, der Standardwert ist 8
heightSegments - Die Anzahl der vertikalen Segmente. Der Mindestwert ist 2, der Standardwert ist 6

Übrigens, je mehr Sie die Anzahl der Dreiecke angeben, desto glatter wird die Oberfläche der Kugel.

Als nächstes versuchen wir, ein anderes Material zu verwenden - MeshNormalMaterial - ein mehrfarbiges Material, das normale Vektoren in RGB-Farben vergleicht:

var material = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
camera.position.z = 3;

Es gibt viele Arten von Material. Einige Materialien können kombiniert und gleichzeitig auf eine Figur angewendet werden. Lesen Sie hier mehr .

Der letzte Schritt besteht darin, den Renderzyklus festzulegen:

function render() {
	requestAnimationFrame( render );
	sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render( scene, camera );
}
render();

Und wir bekommen folgendes:

Versuchen wir, eine komplexere Figur zu erstellen und komplexeres Material anzuwenden.

Nehmen Sie als Beispiel das Material MeshPhongMaterial , das die Beleuchtung berücksichtigt. Deshalb müssen wir zuerst etwas Licht in die Szene bringen. Unten fügen wir ein SpotLight mit einem gelben Farbton hinzu und legen seine Position auf der Koordinatenachse fest:

var scene = new THREE.Scene();
var spotLight = new THREE.SpotLight(0xeeeece);
spotLight.position.set(1000, 1000, 1000);
scene.add(spotLight);
var spotLight2 = new THREE.SpotLight(0xffffff);
spotLight2.position.set( -200, -200, -200);
scene.add(spotLight2);

Wie oben erwähnt, strahlt SpotLight von einem Punkt in eine Richtung entlang eines Kegels und dehnt sich aus, wenn Sie sich von der Lichtquelle entfernen. Zusätzlich zur Farbe kann Punktlicht Argumente annehmen: Intensität, Entfernung, Winkel, Halbschatten, Verfall und auch Schattenwurf.

Sie können über andere Arten von Licht und ihre Fähigkeiten lesen hier .

Definieren Sie nun die Form selbst:

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

Die TorusGeometry- Klasse dient zum Bau von Tori oder „Walzen“. Diese Klasse nimmt die folgenden Parameter an:

Radius, Standard ist 1;
Rohrdurchmesser, Standard 0,4;
radialSegments oder die Anzahl der Dreiecksegmente ist standardmäßig 8;
tubularSegments oder Anzahl der Gesichtssegmente, Standard ist 6

Material hinzufügen:

var material = new THREE.MeshPhongMaterial( {
color: 0xdaa520,
specular: 0xbcbcbc,
 } );

Dieses Material ist für glänzende Oberflächen gedacht. Wir geben ihm eine goldene Farbe und fügen eine spiegelnde Eigenschaft hinzu , die den Glanz des Materials und seine Farbe beeinflusst. Die Standardfarbe ist 0x111111 - dunkelgrau.

Rendern und Folgendes haben wir erreicht:

Ein bisschen mehr über Three.js Funktionen

Um Three.js in ein Projekt aufzunehmen, müssen Sie nur npm install drei ausführen .

Wenn Sie Dateien mit Webpack oder Browserify zusammenführen , wodurch Sie require ('modules') im Browser implementieren und alle Ihre Abhängigkeiten kombinieren können, haben Sie die Möglichkeit, das Modul in Ihre Quelldateien zu importieren und im normalen Modus weiter zu verwenden:

var THREE = require('three');

var scene = new THREE.Scene();
...

Es ist auch möglich, den ES6-Syntaximport zu verwenden :

import * as THREE from 'three';

const scene = new THREE.Scene();
...

Wenn Sie nur bestimmte Teile der Three.js-Bibliothek importieren möchten, z. B. Szene :

import { Scene } from 'three';

const scene = new Scene();
...

Fazit

Mit Hilfe von fast ein paar Codezeilen haben wir zwei einfache Formen erstellt, von denen eine etwas komplizierter ist. Natürlich hat Three.js viel mehr Funktionen. Three.js hat viele Formen in der Box, Materialien, Beleuchtungsarten usw. Dies ist nur ein kleiner Teil der Grundlagen.

Mit der Three.js-Bibliothek können Sie wirklich gesunde Dinge erstellen und erstellen. Hier einige Beispiele:

Beispiel 1
Beispiel 2
Beispiel 3

Wenn Sie 3D in JavaScript lernen möchten, finden Sie hier oder hier alles, was Sie brauchen .

Einführung in 3D: Three.js Basics