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 wichtigen Funktionen von Three.js ist die Möglichkeit, Lichter und Schatten in 3D-Szenen zu erstellen. In diesem Artikel werden wir uns ansehen, wie Sie Lichter und Schatten zu Ihren Three.js-Szenen hinzufügen können.

Einleitung

Lichter und Schatten sind entscheidend, um realistische 3D-Szenen zu erstellen. Three.js bietet verschiedene Lichttypen und Schattenoptionen, um Ihre Szenen zum Leben zu erwecken. Wir werden uns auf die folgenden Themen konzentrieren:

Ambient Light (Umgebungslicht): Ein Licht, das die Szene gleichmäßig ausleuchtet, ohne Schatten zu werfen.

Directional Light (Richtungslicht): Ein Licht, das in einer bestimmten Richtung scheint und Schatten erzeugt.

Spotlight (Scheinwerfer): Ein gerichtetes Licht, das einen begrenzten Bereich beleuchtet und Schatten wirft.

Schatten (Shadows): Wie Sie Schatten für Objekte in Three.js aktivieren.

Einrichtung

Bevor wir beginnen, stellen Sie sicher, dass Sie Three.js in Ihrem Projekt eingebunden haben. Sie können es von der offiziellen Website herunterladen oder es über npm installieren:

npm install three


Nachdem Sie Three.js in Ihrem Projekt eingebunden haben, können wir mit dem Code-Beispiel beginnen.

Beispielcode

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Lights and Shadows</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script>

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

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

// WebGL-Renderer erstellen
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Umgebungslicht hinzufügen
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// Richtungslicht hinzufügen
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 0); // Position des Lichts
scene.add(directionalLight);

// Bodenfläche erstellen
const groundGeometry = new THREE.PlaneGeometry(10, 10);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2; // Bodenfläche liegt flach
ground.receiveShadow = true; // Aktivieren Sie Schatten für den Boden
scene.add(ground);

// Erstellen Sie ein Objekt, das Schatten wirft
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.y = 1;
cube.castShadow = true; // Aktivieren Sie Schatten für das Objekt
scene.add(cube);

// Hinzufügen einer Spot-Lichtquelle
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 3, 2);
spotLight.castShadow = true;
scene.add(spotLight);

// Aktualisieren Sie die Kameraansicht
const animate = () => {
requestAnimationFrame(animate);

// Objektrotation für visuelle Ästhetik
cube.rotation.x = 0.01;
cube.rotation.y = 0.01;

renderer.render(scene, camera);
};

animate();

</script>
</body>
</html>


In diesem Code-Beispiel haben wir eine einfache Three.js-Szene erstellt und Lichter und Schatten hinzugefügt. Wir haben ein Ambient Light, ein Directional Light und ein Spotlight hinzugefügt. Außerdem haben wir ein Bodenobjekt und ein Würfelobjekt erstellt, wobei wir Schatten für den Würfel aktiviert haben.

Fazit

Das Hinzufügen von Lichtern und Schatten in Three.js kann Ihre 3D-Szenen erheblich verbessern und ihnen Realismus verleihen. Sie können die verschiedenen Lichttypen und Schattenoptionen anpassen, um die gewünschte Atmosphäre und visuelle Wirkung zu erzielen. Experimentieren Sie mit den Parametern und erstellen Sie beeindruckende 3D-Grafiken für Ihre Webprojekte.

Weitere Artikel:

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

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

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

Einführung in Texturen und Materialien in Three.js

Die Welt der 3D-Webentwicklung hat in den letzten Jahren enorme Fortschritte gemacht, und mit Bibliotheken wie Three.js können Entwickler faszinierend

Three.js: Erstellen eines Jump and Run-Spiels

Die Welt der 3D-Spieleentwicklung hat in den letzten Jahren enorme Fortschritte gemacht, und mit Bibliotheken wie Three.js können Entwickler atemberau

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

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

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

JavaScript: Bedingte Anweisungen (if, else if, else)

JavaScript ist eine der wichtigsten Programmiersprachen für die Webentwicklung und ermöglicht es Entwicklern, interaktive und dynamische Webseiten zu

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