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 Arrays
JavaScript ist eine der am weitesten verbreiteten Programmiersprachen der Welt und wird häufig verwendet, um dynamische Webseiten zu erstellen. Eine d
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 fortschrittl
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
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
JavaScript: Validierung von Formularen
Formulare sind ein wesentlicher Bestandteil jeder Website, da sie es den Benutzern ermöglichen, Daten einzugeben und an den Server zu senden. Um siche
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
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: Arbeiten mit Cookies
Cookies sind kleine Textdateien, die von Webseiten auf dem Computer des Benutzers gespeichert werden, um Informationen über die Sitzung oder die Websi
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
Three.js: Erstellen einer 3D-Welt mit mehreren Objekten
Three.js ist eine beliebte JavaScript-Bibliothek zur Erstellung von 3D-Grafiken in Webanwendungen. Mit Three.js können Entwickler beeindruckende 3D-We
