Three.js: Erstellen und Anzeigen eines einfachen Würfels
![](/images/pJW2keQygUWfGQRaRWAiAMQnIcfXPH.jpg)
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:
![](https://www.webmaster.tk/images//dhjjhaTmTvPsFrXxVasFaWS8cPdaZE-400.jpg)
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
![](https://www.webmaster.tk/images//eoyBnYBLxaqdhyVRUn23Vkjv6mvfdA-400.jpg)
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
![](https://www.webmaster.tk/images//BDAwC1Bx0oV3D0JbYa0qJXPddG6kOr-400.jpg)
Funktionen in JavaScript
JavaScript ist eine weit verbreitete Programmiersprache, die hauptsächlich in Webanwendungen eingesetzt wird, um Interaktivität und Funktionalität auf
![](https://www.webmaster.tk/images//shKJD6xrLhNLPph2YWb0QCxPYnVtFM-400.jpg)
Javascript: Arbeiten mit JSON
JavaScript ist eine der am häufigsten verwendeten Programmiersprachen in der Webentwicklung. Eine ihrer Stärken ist die Fähigkeit, Daten in verschiede
![](https://www.webmaster.tk/images//uLv37RddmFoTySzMlPZJS5Uw1kSlyV-400.jpg)
Objektorientierte Programmierung in JavaScript
JavaScript ist eine der am häufigsten verwendeten Programmiersprachen weltweit und wird oft für die Entwicklung von Webanwendungen eingesetzt. Eine de
![](https://www.webmaster.tk/images//AxpdALBakFfEFNoKYcO3A5MgLHCsl5-400.jpg)
Three.js: Erstellung eines 360-Grad-Panorama-Viewers
Wenn Sie bereits Grundkenntnisse in Three.js haben und sich für die Erstellung eines 360-Grad-Panorama-Viewers interessieren, sind Sie hier genau rich
![](https://www.webmaster.tk/images//Aj3l7aQ11ZkROxrF86bbz8popKsTNa-400.jpg)
JavaScript: Asynchrone Programmierung und Promises
Die asynchrone Programmierung ist ein wesentlicher Bestandteil moderner Webentwicklung, da sie ermöglicht, dass Webanwendungen gleichzeitig auf versch
![](https://www.webmaster.tk/images//vkFY8sv2WZrIaPHywuIwA0QU5ML83U-400.jpg)
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
![](https://www.webmaster.tk/images//ydeCCW9U1DxPg6dhZflwozKPy8ygdm-400.jpg)
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
![](https://www.webmaster.tk/images//ZgZEj4ZNA0SDu4jlG1nA78IqMx4e7T-400.jpg)
Three.js: Benutzerinteraktionen wie Mausklicks oder Tastatureingaben
Die Erstellung beeindruckender 3D-Szenen und -Modelle mit Three.js ist bereits faszinierend, aber um wirklich immersive und benutzerfreundliche Anwend