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:
Eine Einführung in Three.js
Die Welt des Webdesigns und der Webentwicklung hat sich in den letzten Jahren rasant entwickelt. Moderne Websites sind nicht mehr nur statische Seiten
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: AJAX und Fetch-API
Die Webentwicklung hat sich in den letzten Jahren erheblich weiterentwickelt, und JavaScript spielt dabei eine entscheidende Rolle. Eine der leistungs
Three.js: Implementieren von Partikelsystemen
Partikelsysteme sind ein leistungsstarkes Werkzeug in der Welt der 3D-Computergrafik. Sie ermöglichen es, komplexe und dynamische Effekte wie Rauch, F
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
Three.js: Erstellung eines Multiplayer-Online-Spiels in 3D
Die Welt der 3D-Entwicklung hat in den letzten Jahren erhebliche Fortschritte gemacht, und mit Frameworks wie Three.js können Entwickler beeindruckend
Funktionen in JavaScript
JavaScript ist eine weit verbreitete Programmiersprache, die hauptsächlich in Webanwendungen eingesetzt wird, um Interaktivität und Funktionalität auf
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: 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
JavaScript: Schleifen (for, while, do-while)
Schleifen sind ein entscheidender Bestandteil jeder Programmiersprache, einschließlich JavaScript. Sie ermöglichen es Entwicklern, Codeblöcke mehrmals
