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:

JavaScript: Arbeiten mit Arrays

JavaScript ist eine der am weitesten verbreiteten Programmiersprachen der Welt und wird häufig verwendet, um dynamische Webseiten zu erstellen. Eine d

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

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: Asynchrone Programmierung und Promises

Die asynchrone Programmierung ist ein wesentlicher Bestandteil moderner Webentwicklung, da sie ermöglicht, dass Webanwendungen gleichzeitig auf versch

Javascript: Arbeiten mit Cookies

Cookies sind kleine Textdateien, die von Webseiten auf dem Computer des Benutzers gespeichert werden, um Informationen über die Sitzung oder die Websi

Three.js: Laden und Anzeigen eines 3D-Modells

Die Welt der 3D-Grafik und -Animationen hat in den letzten Jahren enorme Fortschritte gemacht. Dank JavaScript-Frameworks wie Three.js können Entwickl

Grundlegendes Three.js-Setup

Three.js ist eine JavaScript-Bibliothek, die es Entwicklern ermöglicht, 3D-Grafiken in Webanwendungen zu erstellen und zu rendern. Mit dieser leistung

Three.js: Rotieren und Bewegen von 3D-Objekten

Die Webentwicklung hat in den letzten Jahren enorme Fortschritte gemacht, insbesondere im Bereich der 3D-Webgrafiken. Eine der beliebtesten Bibliothek

JavaScript: Erstellung eines Bildergalerie-Sliders

Bildergalerie-Slider sind eine häufige und ansprechende Möglichkeit, Bilder oder Inhalte auf Websites zu präsentieren. Sie ermöglichen es, verschieden

Three.js: Hinzufügen von Lichtern und Schatten

Die Bibliothek Three.js ist eine leistungsstarke JavaScript-Bibliothek, die die Erstellung von 3D-Grafiken im Webbrowser erleichtert. Eine der wichtig