Drei.js für Anfänger: Erstellen von 3D -Erlebnissen im Web

Three.js ist eine anfängerfreundliche JavaScript-Bibliothek, die die 3D-Webgrafiken vereinfacht, indem komplexer WebGL-Code in verwaltbare Komponenten zusammengefasst wird. 1. Es verwendet eine Szenengraph-Struktur, in der die Szene Objekte enthält, die Kamera die Ansicht definiert und der Renderer alles auf eine Leinwand zeichnet. 2. Schlüsselelemente umfassen Mesh (Geometriematerial) und Licht für die Sichtbarkeit. 3. Die Animation wird durch RequestAnimationFrame für reibungslose Updates erreicht. 4. Die Interaktivität kann über Event -Hörer oder Orbitcontrols zur Kameramanipulation hinzugefügt werden. 5. Zu den Best Practices gehört die Verwendung eines CDN für das Setup, die Wiederverwendung von Objekten in Schleifen, die Größe des Handhabungsfensters und das Lernen aus offiziellen Beispielen. Mit minimalem Code, z. B. einem rotierenden Würfel, können Benutzer schnell interaktive 3D -Erlebnisse im Web erstellen.

Wenn Sie schon immer 3D -Grafiken ins Web bringen wollten, ohne in einen komplexen WebGL -Code zu tauchen, ist Three.js der perfekte Ausgangspunkt. Es ist eine leichte Open-Source-JavaScript-Bibliothek, mit der 3D-Inhalte im Browser erstellt und angezeigt werden können. Für Anfänger entfernt es einen Großteil der Komplexität und bietet dennoch leistungsstarke Tools, um interaktive 3D -Erlebnisse zu erstellen.

Folgendes müssen Sie wissen, um mit drei.Js zu beginnen - keine vorherige 3D -Erfahrung erforderlich.

Was sind drei.js?

Three.js ist eine JavaScript-Bibliothek, die WebGL, die Low-Level-API, um 3D-Grafiken im Browser rendert. Anstatt Hunderte von Shader-Code-Zeilen zu schreiben, erhalten Sie drei.js hochrangige Objekte wie Szenen , Kameras , Lichter und Maschen , die Sie mit einfachem JavaScript manipulieren können.

Stellen Sie sich das so vor:

• Webgl = ein Auto von Grund auf neu erstellen.
• Drei.js = Fahren mit einem tollen Armaturenbrett fahren.

Es wird häufig für 3D -Websites, Datenvisualisierungen, Spiele, Produktvoransichten und sogar Virtual -Reality -Erlebnisse verwendet.

Die Kernkomponenten einer drei.js -Szene

Alle drei.js -Projekte stützt sich auf einige wesentliche Elemente. Sie benötigen alle, um sogar das einfachste 3D -Objekt zu rendern:

• Szene - Der Container für alle Ihre 3D -Objekte, Lichter und Kameras.
• Kamera - bestimmt, wie die Szene angesehen wird (wie ein virtuelles Kameraobjektiv).
• Renderer - Zeichnet die Szene auf eine Leinwand in Ihrer HTML -Seite.
• Mesh - Eine Kombination aus Geometrie (Form) und Material (Aussehen).
• Licht - Ohne Licht sind die meisten Materialien nicht sichtbar.

Hier ist ein minimales Beispiel, um einen sich drehenden Würfel zu erstellen:

 // 1. Richten Sie Szene, Kamera und Renderer ein
const scene = new Three.scene ();
const camera = new Three.
const renderer = new Three.Webglrenderer ();
renderer.setSize (window.innnerwidth, window.innerHeight);
document.body.Appendchild (Renderer.Domelement);

// 2. Erstellen Sie einen Würfel
const geometry = new Three.boxgeometry ();
const materials = new drei.meshbasicmaterial ({Farbe: 0x00ff00, Wireframe: true});
const cube = new Three.mesh (Geometrie, Material);
Szene.Add (Cube);

// 3.. Positionieren Sie die Kamera
camera.position.z = 5;

// 4. Animationsschleife
Funktion animate () {
    RequestAnimationFrame (Animate);

    // den Würfel drehen
    cube.Rotation.x = 0,01;
    cube.Rotation.y = 0,01;

    Renderer.Render (Szene, Kamera);
}
animieren();

Dieser Code richtet eine einfache Szene mit einem rotierenden Drahtmodell -Green Cube ein. Sobald Sie dieses Laufen bekommen haben, sind Sie bereits im 3D -Gebiet.

Schlüsselkonzepte frühzeitig verstehen

Um über die Grundlagen hinauszugehen, konzentrieren Sie sich auf diese grundlegenden Ideen:

• Koordinatensystem : Drei.Js verwendet ein rechtshändiges Koordinatensystem. X = rechts, y = up, z = auf dich zu dir (außerhalb des Bildschirms).
• Geometrie gegen Material :
  • Die Geometrie definiert die Form (Würfel, Kugel, benutzerdefiniertes Netz).
  • Material definiert, wie es aussieht (Farbe, Textur, Glanz).
• Beleuchtungstypen :
  • MeshBasicMaterial reagiert nicht auf Licht (gut zum Testen).
  • MeshLambertMaterial und MeshPhongMaterial tun - Sie benötigen Lichter wie DirectionalLight oder PointLight .
• Animationsschleife : Verwenden Sie requestAnimationFrame() um die Szene in jedem Frame zu aktualisieren.

Es interaktiv machen

Einer der besten Teile von drei.Js ist die interaktive Szenen. Sie können auf Mausbewegungen, Klicks oder Scrollereignisse antworten.

Zum Beispiel, um den Würfel nur zu drehen, wenn der Benutzer klickt:

 Lassen Sie rotieren = falsch;
renderer.domelement.addeventListener ('klick', () => {
    rotieren =! Drehung;
});

Funktion animate () {
    RequestAnimationFrame (Animate);

    if (rotieren) {
        cube.Rotation.y = 0,02;
    }

    Renderer.Render (Szene, Kamera);
}
animieren();

Sie können auch Bibliotheken wie Orbitcontrols verwenden, um die Benutzer mit der Maus zu putzen, zu zoomen und die Kamera zu drehen:

 const kontrolliert = new Three.orbitControls (Kamera, Renderer.domelement);

Fügen Sie einfach die Datei OrbitControls.js aus dem Beispiel -Ordner in das three.js repo ein.

Erste Schritte Tipps

• Verwenden Sie eine Kesselplatte : Beginnen Sie mit einer einfachen HTML -Datei, die drei.js über CDN enthält:

   <script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"> </script>

• Überprüfen Sie die Beispiele : Die offizielle Website Three.js ist voll von funktionierenden Demos, von denen Sie lernen können.
• Entwicklerwerkzeuge : Probleme mit der Größe von Problemen? Überprüfen Sie Ihre Leinwandgröße. Verwenden Sie window.addEventListener('resize', ...) um die Renderer -Größe und das Kamerasandverhältnis anzupassen.
• Leistung : Vermeiden Sie es, neue Objekte in der Animationsschleife zu erstellen. Verwenden Sie nach Möglichkeit Vektoren und Matrizen wieder.

---

Drei.js senkt die Barriere auf die 3D -Webentwicklung in großer Weise. Sobald Sie die Szenengraphstruktur verstanden und wie Objekte interagieren, können Sie alles von animierten Hintergründen bis hin zu vollständigen 3D-Spielen erstellen. Fangen Sie oft klein an, experimentieren Sie oft und haben Sie keine Angst, Dinge zu brechen - so lernen Sie.

Grundsätzlich sind Sie mit nur wenigen Codezeilen bereits auf dem Weg, immersive Web -Erlebnisse zu erstellen.

Das obige ist der detaillierte Inhalt vonDrei.js für Anfänger: Erstellen von 3D -Erlebnissen im Web. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!