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:

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,

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

Javascript: Arbeiten mit Local Storage und Session Storage

JavaScript ist eine vielseitige Programmiersprache, die in Webanwendungen weit verbreitet ist. Eine häufige Anforderung in Webanwendungen ist die Spei

JavaScript: Asynchrone Programmierung und Promises

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

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

Funktionen in JavaScript

JavaScript ist eine weit verbreitete Programmiersprache, die hauptsächlich in Webanwendungen eingesetzt wird, um Interaktivität und Funktionalität auf

Javascript: Arbeiten mit dem DOM (Document Object Model)

Das Document Object Model, kurz DOM, ist ein wichtiger Bestandteil von JavaScript und ermöglicht es Entwicklern, HTML- und XML-Dokumente dynamisch zu

Einführung in Three.js und 3D-Modellierung

Die Welt der 3D-Modellierung hat in den letzten Jahren erhebliche Fortschritte gemacht und ist nicht mehr nur den Profis vorbehalten. Mit fortschrittl

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