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 threeNachdem 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:
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
Animationen mit JavaScript und CSS
Selbst in der heutigen Ära des modernen Webdesigns und der fortschrittlichen Benutzeroberflächen sind Animationen ein unverzichtbares Element, um Webs
JavaScript: Schleifen (for, while, do-while)
Schleifen sind ein entscheidender Bestandteil jeder Programmiersprache, einschließlich JavaScript. Sie ermöglichen es Entwicklern, Codeblöcke mehrmals
Javascript: Modularität und ES6-Module
Die Entwicklung von JavaScript hat in den letzten Jahren enorme Fortschritte gemacht, insbesondere durch die Einführung von ES6 (ECMAScript 2015) und
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
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
Three.js: Laden und Anzeigen eines 3D-Modells
Die Welt der 3D-Grafik und -Animationen hat in den letzten Jahren enorme Fortschritte gemacht. Dank JavaScript-Frameworks wie Three.js können Entwickl
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
JavaScript: Asynchrone Programmierung und Promises
Die asynchrone Programmierung ist ein wesentlicher Bestandteil moderner Webentwicklung, da sie ermöglicht, dass Webanwendungen gleichzeitig auf versch
JavaScript: Fehlerbehandlung (try, catch, throw)
JavaScript ist eine der wichtigsten Programmiersprachen im Webentwicklungsbereich. Sie ermöglicht die Erstellung dynamischer und interaktiver Webseite
