Three.js: Erstellen und Anzeigen eines einfachen Würfels

Three.js ist eine beliebte JavaScript-Bibliothek zur Erstellung von 3D-Grafiken im Webbrowser. Mit Three.js können Entwickler erstaunliche 3D-Szenen, Animationen und Modelle erstellen. In diesem Artikel werden wir Schritt für Schritt zeigen, wie man mit Three.js einen einfachen Würfel erstellt und ihn im Browser anzeigt.

Schritt 1: Einrichtung des Projekts

Bevor wir beginnen können, müssen wir sicherstellen, dass wir Three.js in unser Projekt integriert haben. Sie können Three.js von der offiziellen Website herunterladen oder über npm installieren. Hier ist ein einfaches Beispiel, wie Sie Three.js in Ihr HTML-Dokument einbinden können:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Cube with Three.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="main.js"></script>
</body>
</html>


Schritt 2: Erstellen einer Szene, einer Kamera und eines Renderers

In unserem JavaScript-Datei "main.js" beginnen wir mit der Initialisierung von Three.js-Elementen. Hier erstellen wir eine Szene, eine Kamera und einen Renderer:

// Hauptkomponenten
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


Schritt 3: Erstellen des Würfels

Um einen Würfel zu erstellen, benötigen wir ein geometrisches Modell und ein Material. Wir verwenden den "BoxGeometry"-Konstruktor für den Würfel und den "MeshBasicMaterial"-Konstruktor für das Material (in diesem Fall ein einfaches, nicht beleuchtetes Material):

// Würfel erstellen
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);


Schritt 4: Positionieren der Kamera und des Würfels

Wir müssen die Kamera und den Würfel positionieren, damit sie in unserer Szene sichtbar sind:

camera.position.z = 5;
cube.position.set(0, 0, 0); // Die Position des Würfels (x, y, z)


Schritt 5: Animationsschleife erstellen

Um unsere Szene zu aktualisieren und den Würfel zu animieren, erstellen wir eine Animationsschleife:

const animate = () => {
requestAnimationFrame(animate);

// Hier können Sie Animationen oder Transformationen hinzufügen

renderer.render(scene, camera);
};

animate();


Schritt 6: Ergebnis im Browser anzeigen

Öffnen Sie Ihr HTML-Dokument in einem Webbrowser, und Sie sollten einen grünen Würfel auf einem schwarzen Hintergrund sehen.

Das war s! Sie haben erfolgreich einen einfachen Würfel mit Three.js erstellt und im Browser angezeigt. Von hier aus können Sie weitere Funktionen und Effekte hinzufügen, um Ihre 3D-Szene zu erweitern und anzupassen.

Dieses Beispiel dient nur als Einstiegspunkt. Three.js bietet eine breite Palette von Möglichkeiten zur Erstellung komplexer 3D-Anwendungen. Wir hoffen, dass dieser Artikel Ihnen den Einstieg erleichtert hat. Happy coding!

Weitere Artikel:

Einführung in Texturen und Materialien in Three.js

Die Welt der 3D-Webentwicklung hat in den letzten Jahren enorme Fortschritte gemacht, und mit Bibliotheken wie Three.js können Entwickler faszinierend

Einführung in Three.js und das 3D-Flugzeugspiel

Die Welt der 3D-Webentwicklung hat in den letzten Jahren enorm an Bedeutung gewonnen, und dank leistungsfähiger Bibliotheken wie Three.js können Entwi

JavaScript: Ereignisbehandlung (Event Handling)

JavaScript ist eine der wichtigsten Programmiersprachen für die Entwicklung von Webanwendungen. Eine der Kernfunktionen von JavaScript ist die Ereigni

Three.js: Implementieren von Partikelsystemen

Partikelsysteme sind ein leistungsstarkes Werkzeug in der Welt der 3D-Computergrafik. Sie ermöglichen es, komplexe und dynamische Effekte wie Rauch, F

JavaScript: Validierung von Formularen

Formulare sind ein wesentlicher Bestandteil jeder Website, da sie es den Benutzern ermöglichen, Daten einzugeben und an den Server zu senden. Um siche

Javascript: Dynamisches Laden von Inhalten mit AJAX und JSON

In der heutigen Webentwicklung ist die Möglichkeit, Inhalte dynamisch nachzuladen, von entscheidender Bedeutung, um reaktionsschnelle und benutzerfreu

Optimierung von Three.js-Anwendungen

Die Verwendung von Three.js zur Erstellung beeindruckender 3D-Anwendungen im Web hat in den letzten Jahren stark zugenommen. Entwickler auf der ganzen

Three.js: Erstellen einer 3D-Welt mit mehreren Objekten

Three.js ist eine beliebte JavaScript-Bibliothek zur Erstellung von 3D-Grafiken in Webanwendungen. Mit Three.js können Entwickler beeindruckende 3D-We

JavaScript: AJAX und Fetch-API

Die Webentwicklung hat sich in den letzten Jahren erheblich weiterentwickelt, und JavaScript spielt dabei eine entscheidende Rolle. Eine der leistungs

JavaScript: Grundlagen der Variablen und Datentypen

JavaScript ist eine der am weitesten verbreiteten Programmiersprachen für die Entwicklung von Webanwendungen. Wenn Sie in die Welt des Webentwicklungs