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:
Three.js: Erstellen eines VR- oder AR-Erlebnisses mit Three.js
Die Entwicklung von Virtual Reality (VR) und Augmented Reality (AR) hat in den letzten Jahren enorme Fortschritte gemacht und bietet aufregende Möglic
Javascript: Implementierung von Drag-and-Drop-Funktionen
Drag-and-Drop-Funktionen sind heutzutage ein wesentlicher Bestandteil vieler Webanwendungen. Sie ermöglichen es den Benutzern, Elemente auf einer Webs
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
Einführung in Animationen in Three.js
Die Welt der 3D-Animationen hat sich in den letzten Jahren rasant entwickelt und bietet Entwicklern und Kreativen die Möglichkeit, beeindruckende visu
JavaScript: Asynchrone Programmierung und Promises
Die asynchrone Programmierung ist ein wesentlicher Bestandteil moderner Webentwicklung, da sie ermöglicht, dass Webanwendungen gleichzeitig auf versch
Three.js: Verwendung von Shader-Programmen und GLSL
Three.js ist eine beliebte JavaScript-Bibliothek zur Erstellung von 3D-Grafiken und -Animationen im Web. Es bietet eine Vielzahl von Funktionen und To
JavaScript: Grundlagen der Variablen und Datentypen
JavaScript ist eine der am weitesten verbreiteten Programmiersprachen für die Entwicklung von Webanwendungen. Wenn Sie in die Welt des Webentwicklungs
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
Funktionen in JavaScript
JavaScript ist eine weit verbreitete Programmiersprache, die hauptsächlich in Webanwendungen eingesetzt wird, um Interaktivität und Funktionalität auf
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
