Three.js Tutorial: Ein Leitfaden für Anfänger

Three.js ist eine der beliebtesten JavaScript-Bibliotheken für die Erstellung von 3D-Grafiken in Webbrowsern. Basierend auf WebGL vereinfacht es den Prozess der Erstellung und Anzeige animierter 3D-Computergrafiken in einem Webbrowser, ohne dass Sie Low-Level-WebGL lernen müssen. Egal, ob Sie interaktive Visualisierungen, Spiele oder immersive Web-Erlebnisse erstellen möchten, Three.js bietet die Werkzeuge, die Sie benötigen, um Ihre Ideen zum Leben zu erwecken.

Bevor wir uns in die Three.js-Entwicklung stürzen, erwägen Sie, Apidog als Postman-Alternative für Ihre API-Testanforderungen auszuprobieren. Apidog bietet eine intuitive Benutzeroberfläche mit leistungsstarken Funktionen für API-Entwicklung, -Tests und -Dokumentation – alles ohne den Funktionsüberhang, den viele Benutzer bei Postman frustrierend finden. Es ist ein ausgezeichnetes Begleitwerkzeug bei der Entwicklung von Webanwendungen, die mit APIs interagieren.

button

Beginnen wir nun unsere Reise in Three.js!

1. Einrichten Ihrer Umgebung

Installation

Es gibt verschiedene Möglichkeiten, Three.js in Ihr Projekt einzubinden:

Option 1: Verwendung von npm (empfohlen)

npm install three

Importieren Sie es dann in Ihre JavaScript-Datei:

import * as THREE from 'three';

Option 2: Verwendung eines CDN

Fügen Sie dies in Ihre HTML-Datei ein:

<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>

Option 3: Lokal herunterladen und einbinden

Laden Sie die Bibliothek von der Three.js-Website herunter und binden Sie sie in Ihr HTML ein:

<script src="path/to/three.min.js"></script>

Projektstruktur

Für ein einfaches Three.js-Projekt benötigen Sie:

project-folder/
├── index.html
├── style.css
└── script.js

Ihre index.html-Datei sollte Folgendes enthalten:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Three.js App</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. Verstehen der Grundlagen

Three.js arbeitet mit einigen Schlüsselkonzepten, die es zu verstehen gilt:

Die Kernkomponenten

Scene: Stellen Sie sich dies als einen Container vor, der alle Ihre Objekte, Lichter und Kameras enthält.
Camera: Definiert, welcher Teil der Szene sichtbar ist (Ihr Blickwinkel).
Renderer: Zeichnet, was die Kamera auf Ihrem Bildschirm sieht.
Objects (Meshes): Die 3D-Objekte in Ihrer Szene, typischerweise bestehend aus Geometrie und Material.
Lights: Lichtquellen für Ihre Szene.

Erstellen Ihrer ersten Szene

Hier ist ein einfaches Beispiel, um einen sich drehenden Würfel zu erstellen:

// Create the scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(
    75,                                     // Field of view
    window.innerWidth / window.innerHeight, // Aspect ratio
    0.1,                                    // Near clipping plane
    1000                                    // Far clipping plane
);
camera.position.z = 5;

// Create the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Animation loop
function animate() {
    requestAnimationFrame(animate);
    
    // Rotate the cube
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}
animate();

3. Gestalten Ihrer App reaktionsfähig

Um sicherzustellen, dass Ihre Three.js-Anwendung auf allen Geräten gut aussieht, müssen Sie die Größenänderung des Fensters behandeln:

// Handle window resizing
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    // Update renderer
    renderer.setSize(width, height);
    
    // Update camera
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

4. Hinzufügen von Materialien und Beleuchtung

Einfache Szenen sind nur der Anfang. Lassen Sie uns die visuelle Qualität mit Materialien und Lichtern verbessern:

Materialien

// Standard material with reflection
const material = new THREE.MeshStandardMaterial({
    color: 0x0088ff,       // Blue color
    roughness: 0.5,        // Somewhat shiny
    metalness: 0.5,        // Somewhat metallic
});

// Phong material for simple shiny surfaces
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0xff0000,       // Red color
    shininess: 100,        // Very shiny
    specular: 0x111111     // Specular highlight color
});

Lichter

// Add ambient light
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// Add directional light (like the sun)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// Add point light (like a light bulb)
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

5. Erstellen verschiedener Geometrien

Three.js enthält viele integrierte Geometrien:

// Sphere
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -3;
scene.add(sphere);

// Cylinder
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, material);
cylinder.position.x = 0;
scene.add(cylinder);

// Torus (donut)
const torusGeometry = new THREE.TorusGeometry(0.8, 0.3, 16, 100);
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.x = 3;
scene.add(torus);

6. Erstellen von Text in Three.js

Text kann Ihrer Szene mithilfe von TextGeometry hinzugefügt werden:

// First, load the font
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
    const textGeometry = new THREE.TextGeometry('Hello Three.js!', {
        font: font,
        size: 0.5,
        height: 0.1,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    });
    
    const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
    const text = new THREE.Mesh(textGeometry, textMaterial);
    
    // Center the text
    textGeometry.computeBoundingBox();
    const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
    text.position.x = -textWidth / 2;
    
    scene.add(text);
});

7. Zeichnen von Linien

Sie können Linien in Three.js für Drahtgitter oder Pfadvisualisierungen erstellen:

// Create points for the line
const points = [];
points.push(new THREE.Vector3(-2, 0, 0));
points.push(new THREE.Vector3(0, 2, 0));
points.push(new THREE.Vector3(2, 0, 0));

// Create the line geometry
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

// Create material
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });

// Create the line
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

8. Interaktion und Steuerung

Um Benutzern die Interaktion mit Ihrer 3D-Szene zu ermöglichen, können Sie Steuerelemente hinzufügen:

// Import OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Create controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Add smooth damping effect
controls.dampingFactor = 0.05;

// Update the animation loop
function animate() {
    requestAnimationFrame(animate);
    
    // Update controls
    controls.update();
    
    renderer.render(scene, camera);
}

9. Laden von 3D-Modellen

Sie können Modelle importieren, die in Software wie Blender erstellt wurden:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load(
    'path/to/model.gltf',
    // Called when loaded
    function(gltf) {
        scene.add(gltf.scene);
    },
    // Called during loading
    function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    // Called on error
    function(error) {
        console.error('An error happened', error);
    }
);

10. Tipps zur Fehlerbehebung und Leistung

Statistik-Panel

import Stats from 'three/examples/jsm/libs/stats.module.js';

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
    requestAnimationFrame(animate);
    stats.begin();
    
    // Your animation code here
    
    stats.end();
    renderer.render(scene, camera);
}

Leistungstipps

Verwenden Sie BufferGeometry anstelle von Geometry (was veraltet ist)
Verwenden Sie Materialien und Geometrien wieder, wenn möglich
Setzen Sie renderer.powerPreference = 'high-performance' für eine bessere GPU-Nutzung
Verwenden Sie Object3D.frustumCulled = true, um Objekte außerhalb der Kameraansicht auszublenden
Optimieren Sie die Modellkomplexität, indem Sie nach Möglichkeit weniger Polygone verwenden

Fazit

Sie haben jetzt die Grundlagen von Three.js gelernt, von der Einrichtung Ihrer Umgebung bis zur Erstellung interaktiver 3D-Szenen. Dies ist erst der Anfang – Three.js bietet eine Vielzahl von Funktionen zur Erstellung atemberaubender 3D-Web-Erlebnisse.

Um Ihr Wissen zu vertiefen, erkunden Sie die offizielle Three.js-Dokumentation und die Beispielgalerie. Die Community ist auch in Foren und auf GitHub aktiv und bietet Ressourcen und Unterstützung für Entwickler aller Niveaus.

Denken Sie daran, dass das Experimentieren der beste Weg zum Lernen ist. Beginnen Sie mit einfachen Projekten und arbeiten Sie sich schrittweise zu komplexeren Szenen vor. Mit Übung und Geduld werden Sie im Handumdrehen beeindruckende 3D-Web-Erlebnisse erstellen!

Viel Spaß beim Codieren mit Three.js!

button