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 fortschrittlichen Webtechnologien wie Three.js können auch Entwickler mit grundlegenden Kenntnissen in JavaScript und HTML erstaunliche 3D-Modelle erstellen. In diesem Artikel werden wir Schritt für Schritt durch den Prozess der Erstellung eines einfachen 3D-Modells mit Three.js führen.

Was ist Three.js?

Three.js ist eine JavaScript-Bibliothek, die die Erstellung von 3D-Grafiken in Webanwendungen erheblich vereinfacht. Sie basiert auf WebGL, einer webbasierten 3D-Grafiktechnologie, und ermöglicht es Entwicklern, beeindruckende 3D-Szenen und Modelle direkt im Browser darzustellen. Mit Three.js können Sie 3D-Objekte erstellen, sie texturieren, animieren und in Echtzeit interagieren lassen.

Warum Three.js verwenden?

Die Verwendung von Three.js bietet mehrere Vorteile. Zum einen ist es plattformunabhängig, da es in jedem modernen Webbrowser läuft, ohne dass zusätzliche Plugins oder Softwareinstallationen erforderlich sind. Darüber hinaus ist es Open Source und hat eine lebhafte Entwicklergemeinschaft, was bedeutet, dass Sie auf eine Fülle von Ressourcen und Unterstützung zugreifen können.

Voraussetzungen

Bevor wir in die Erstellung eines 3D-Modells eintauchen, sollten Sie sicherstellen, dass Sie über grundlegende Kenntnisse in JavaScript, HTML und CSS verfügen. Es ist auch hilfreich, wenn Sie bereits Erfahrung mit der Verwendung von WebGL haben, obwohl dies keine zwingende Voraussetzung ist. Ein Texteditor Ihrer Wahl und ein moderner Webbrowser sind die einzigen Werkzeuge, die Sie benötigen, um loszulegen.

Einrichten des Arbeitsumfelds

Bevor wir in die eigentliche Erstellung unseres 3D-Modells eintauchen, müssen wir sicherstellen, dass unser Arbeitsumfeld ordnungsgemäß eingerichtet ist. Dies umfasst das Herunterladen der Three.js-Bibliothek und das Erstellen eines einfachen HTML-Grundgerüsts. Hier sind die Schritte, um dies zu erreichen:

Schritt 1: Herunterladen von Three.js

Besuchen Sie die offizielle Three.js-Website unter https://threejs.org/ und klicken Sie auf den "Download" -Link. Dort können Sie die neueste Version von Three.js als ZIP-Archiv herunterladen. Entpacken Sie das Archiv an einem Ort Ihrer Wahl.

Schritt 2: Erstellen eines Arbeitsverzeichnisses

Erstellen Sie ein neues Arbeitsverzeichnis auf Ihrem Computer. Dieses Verzeichnis dient als Projektordner, in dem Sie Ihre HTML-, JavaScript- und Ressourcendateien organisieren können. Geben Sie Ihrem Projekt einen aussagekräftigen Namen.

Schritt 3: Erstellen der HTML-Grundstruktur

Öffnen Sie einen Texteditor und erstellen Sie eine neue HTML-Datei in Ihrem Arbeitsverzeichnis. Geben Sie der Datei einen Namen, beispielsweise "index.html". Verwenden Sie die folgende HTML-Grundstruktur als Ausgangspunkt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mein erstes 3D-Modell</title>
</head>
<body>
    <!-- Hier wird unser 3D-Modell gerendert -->
    
    <!-- Verweis auf die Three.js-Bibliothek -->
    <script src="pfad/zur/three.min.js"></script>
    
    <!-- Unser JavaScript-Code wird hier eingefügt -->
    <script src="pfad/zur/ihre_3d_modell.js"></script>
</body>
</html>

Stellen Sie sicher, dass Sie den Pfad zur heruntergeladenen "three.min.js"-Datei korrekt angeben.

Schritt 4: Erstellen einer JavaScript-Datei

Erstellen Sie im gleichen Arbeitsverzeichnis eine neue JavaScript-Datei, z.B. "ihre_3d_modell.js". Diese Datei wird der Ort sein, an dem wir unser 3D-Modell erstellen und steuern.

Erstellung eines einfachen 3D-Objekts

In diesem Abschnitt werden wir ein einfaches 3D-Objekt erstellen, um die Grundlagen der 3D-Modellierung mit Three.js zu verstehen. Folgen Sie diesen Schritten:

Schritt 1: Initialisieren des Szenarios

Öffnen Sie Ihre "ihre_3d_modell.js"-Datei im Texteditor. Zuerst müssen wir unser Three.js-Szenario initialisieren. Fügen Sie den folgenden Code hinzu:

// Holen Sie sich eine Referenz auf das HTML-Canvas-Element, in dem das 3D-Modell gerendert wird
const canvas = document.querySelector( canvas );

// Erstellen Sie eine Szene
const scene = new THREE.Scene();

// Erstellen Sie eine Kamera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Erstellen Sie einen Renderer und fügen Sie ihn zum Canvas hinzu
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

Hier haben wir eine Szene, eine Kamera und einen Renderer erstellt. Die Kamera wird auf die Position z=5 gesetzt und sieht in Richtung der Szene.

Schritt 2: Erstellen eines 3D-Objekts

Lassen Sie uns nun ein einfaches 3D-Objekt, wie zum Beispiel einen Würfel, erstellen:

// Erstellen Sie einen Würfel
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Grün

const cube = new THREE.Mesh(geometry, material);

// Fügen Sie den Würfel zur Szene hinzu
scene.add(cube);

Hier haben wir die Geometrie (Form) und das Material für den Würfel definiert und dann einen Mesh (3D-Objekt) erstellt, indem wir die Geometrie und das Material miteinander kombiniert haben. Schließlich haben wir den Würfel zur Szene hinzugefügt.

Schritt 3: Animationsschleife

Um das 3D-Modell auf dem Bildschirm anzuzeigen, benötigen wir eine Animationsschleife. Fügen Sie den folgenden Code hinzu:

// Erstellen Sie eine Animationsschleife
const animate = () => {
    requestAnimationFrame(animate);

    // Drehen Sie den Würfel
    cube.rotation.x  = 0.01;
    cube.rotation.y  = 0.01;

    // Rendern Sie die Szene mit der Kamera
    renderer.render(scene, camera);
};

// Starten Sie die Animationsschleife
animate();

Dieser Code erstellt eine endlose Animationsschleife, in der sich der Würfel kontinuierlich dreht. Die requestAnimationFrame-Funktion stellt sicher, dass die Animation in der optimalen Bildrate gerendert wird.

Speichern Sie Ihre Datei, und öffnen Sie dann Ihre "index.html"-Datei in einem Webbrowser. Sie sollten einen rotierenden grünen Würfel auf dem Bildschirm sehen.

Texturierung und Materialien

Die Darstellung eines 3D-Objekts mit einer einfarbigen Oberfläche kann gut sein, aber oft möchten Sie Ihr Modell realistischer gestalten. In diesem Abschnitt lernen Sie, wie Sie Texturen und Materialien auf Ihr 3D-Modell in Three.js anwenden.

Schritt 1: Textur laden

Zuerst benötigen Sie eine Textur, die Sie auf Ihr 3D-Modell anwenden können. Sie können freie Texturquellen im Internet finden oder Ihre eigenen erstellen. Stellen Sie sicher, dass Ihre Textur im Bildformat wie JPEG oder PNG vorliegt.

Legen Sie die Textur in Ihrem Projektverzeichnis ab.

Schritt 2: Anpassen des Materials

Öffnen Sie Ihre "ihre_3d_modell.js"-Datei und aktualisieren Sie das Material Ihres Würfels, um die Textur anstelle der einfarbigen Oberfläche zu verwenden:

// Laden Sie die Textur
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load( pfad/zur/ihre_textur.jpg );

// Erstellen Sie ein Material mit der Textur
const material = new THREE.MeshBasicMaterial({ map: texture });

// Fügen Sie den Würfel zur Szene hinzu
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Stellen Sie sicher, dass Sie den richtigen Pfad zur Texturdatei angeben.

Schritt 3: Anpassen der UV-Abbildung

Damit die Textur korrekt auf das 3D-Modell passt, müssen Sie die UV-Abbildung anpassen. Dies bestimmt, wie die 2D-Textur auf die 3D-Oberfläche projiziert wird. Beachten Sie, dass dies bei komplexeren Modellen komplizierter sein kann.

In diesem einfachen Fall ist keine zusätzliche Anpassung erforderlich, da die "BoxGeometry" standardmäßig gut auf eine Textur abgebildet wird.

Schritt 4: Anzeigen des Ergebnisses

Speichern Sie Ihre Datei und aktualisieren Sie Ihre Webseite im Webbrowser. Sie sollten nun Ihren Würfel mit der angewendeten Textur sehen.

Die Fähigkeit, Texturen und Materialien auf 3D-Modelle anzuwenden, ist entscheidend für die Erstellung realistischer und visuell ansprechender Szenen. In den nächsten Abschnitten werden wir noch tiefer in die Welt der Three.js eintauchen und fortschrittlichere Funktionen kennenlernen.

Beleuchtung und Schatten in Three.js

Die Darstellung eines 3D-Modells kann ohne Beleuchtung flach und unnatürlich wirken. In diesem Abschnitt werden wir die Grundlagen der Beleuchtung in Three.js erkunden und lernen, wie man Schatten hinzufügt, um die Realismus des Modells zu steigern.

Schritt 1: Hinzufügen von Beleuchtung

Three.js bietet verschiedene Arten von Lichtquellen, die Sie Ihrer Szene hinzufügen können. Im folgenden Beispiel werden wir eine Punktlichtquelle verwenden:

// Erstellen Sie eine Punktlichtquelle
const pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.set(10, 10, 10);

// Fügen Sie das Licht zur Szene hinzu
scene.add(pointLight);

Hier haben wir eine weiße Punktlichtquelle erstellt und auf eine Position (10, 10, 10) in der Szene gesetzt. Sie können die Position und die Farbe des Lichts nach Ihren Wünschen anpassen.

Schritt 2: Hinzufügen von Schatten

Um Schatten zu aktivieren, müssen Sie dies für die Objekte in Ihrer Szene und für das Licht selbst aktivieren:

// Aktivieren Sie Schatten für das Licht
pointLight.castShadow = true;

// Aktivieren Sie Schatten für den Würfel
cube.castShadow = true;

// Erstellen Sie einen Boden für die Schatten
const groundGeometry = new THREE.PlaneGeometry(20, 20);
const groundMaterial = new THREE.MeshBasicMaterial({ color: 0xCCCCCC });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.receiveShadow = true; // Damit der Boden Schatten empfangen kann

// Fügen Sie den Boden zur Szene hinzu
scene.add(ground);

In diesem Beispiel haben wir Schatten für das Licht und den Würfel aktiviert, indem wir die Eigenschaft castShadow auf true gesetzt haben. Außerdem haben wir einen Boden erstellt, der Schatten empfängt, indem wir die Eigenschaft receiveShadow auf true gesetzt haben.

Schritt 3: Einstellungen für Schattenqualität

Schatten in Three.js können in Bezug auf ihre Qualität und Schärfe angepasst werden. Dazu müssen Sie die Renderer-Einstellungen ändern:

// Aktivieren Sie den Schattenwurf für den Renderer
renderer.shadowMap.enabled = true;

// Verbessern Sie die Schattenqualität
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Weichgezeichnete Schatten

Die Einstellung THREE.PCFSoftShadowMap bietet weichgezeichnete Schatten und ist visuell ansprechender als die Standardoption.

Speichern Sie Ihre Datei und aktualisieren Sie Ihre Webseite im Webbrowser. Sie sollten nun sehen, dass der Würfel Schatten auf den Boden wirft und die Szene realistischer aussieht.

Die Verwendung von Beleuchtung und Schatten ist entscheidend, um Ihre 3D-Szene lebendiger und realistischer zu gestalten.

Animation und Interaktion in Three.js

Die Möglichkeit, 3D-Modelle zu animieren und Benutzerinteraktionen zu ermöglichen, ist ein wichtiger Aspekt der 3D-Entwicklung mit Three.js. In diesem Abschnitt werden wir lernen, wie man Animationen erstellt und einfache Interaktionen in unsere Szene integriert.

Schritt 1: Animation erstellen

Three.js bietet eine leistungsstarke Animationsschnittstelle, mit der Sie 3D-Modelle animieren können. Hier ist ein einfaches Beispiel, wie Sie den Würfel aus den vorherigen Abschnitten rotieren lassen können:

// Erstellen Sie eine Animationsschleife
const animate = () => {
    requestAnimationFrame(animate);

    // Drehen Sie den Würfel
    cube.rotation.x  = 0.01;
    cube.rotation.y  = 0.01;

    // Rendern Sie die Szene mit der Kamera
    renderer.render(scene, camera);
};

// Starten Sie die Animationsschleife
animate();

In diesem Beispiel wird der Würfel kontinuierlich um die X- und Y-Achse rotiert. Die requestAnimationFrame-Funktion sorgt für eine flüssige Animation.

Schritt 2: Benutzerinteraktion hinzufügen

Sie können Benutzerinteraktionen wie das Drehen des 3D-Modells bei Mausklicks oder das Zoomen mit der Maus hinzufügen. Hier ist ein einfaches Beispiel, wie Sie auf Mausereignisse reagieren können:

// Verfolgen Sie die Mausposition
const mouse = new THREE.Vector2();

// Fügen Sie ein Eventlistener für Mausbewegungen hinzu
window.addEventListener( mousemove , (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2   1;
});

// Erstellen Sie eine Raycaster
const raycaster = new THREE.Raycaster();

// Fügen Sie ein Eventlistener für Mausklicks hinzu
window.addEventListener( click , () => {
    // Aktualisieren Sie den Raycaster
    raycaster.setFromCamera(mouse, camera);

    // Erkennen Sie, ob der Raycaster ein Objekt trifft
    const intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        // Das erste getroffene Objekt wurde geklickt
        const clickedObject = intersects[0].object;

        // Fügen Sie hier Ihre Interaktion hinzu
        // Zum Beispiel, ändern Sie die Farbe des Objekts
        clickedObject.material.color.set(0xff0000);
    }
});

In diesem Beispiel wird die Mausposition in einer normalisierten Form verfolgt und ein Raycaster erstellt, um festzustellen, auf welches 3D-Objekt die Maus zeigt. Wenn ein Klick erkannt wird, können Sie Aktionen auf dem angeklickten Objekt ausführen.

Schritt 3: Fortgeschrittene Animationen

Three.js bietet viele Möglichkeiten für fortgeschrittene Animationen wie Morphing, Skelettanimationen und Pfadanimationen. Diese erfordern oft komplexere Modelle und Animationstechniken.

Mit diesen Schritten können Sie Animationen und Interaktionen in Ihre Three.js-Szene integrieren und sie damit dynamischer und ansprechender gestalten. Experimentieren Sie mit verschiedenen Animationen und Interaktionen, um Ihre 3D-Welten lebendig zu machen. Viel Spaß beim Entwickeln Ihrer 3D-Anwendungen mit Three.js!

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

Weitere Artikel:

Mehr zum Thema

Links

Webmaster .tk

About

Artikel