Now that we've explored the fundamental concepts of lighting and shadows in Three.js, let's bring it all together with a practical example. We'll create a simple scene with a few objects, experiment with different light sources, and then introduce shadows to add depth and realism. This hands-on approach will solidify your understanding and give you a solid foundation for building more complex 3D experiences.
Our goal is to create a scene that demonstrates the interplay between light, material, and shadows. We'll set up a basic environment and then gradually introduce lighting elements. The following steps outline the process, from initialization to adding the final touches.
First, let's set up our basic Three.js scene. This includes creating a scene, a camera, and a renderer. We'll also add a simple ground plane and a few geometric shapes to cast shadows upon.
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Add a ground plane
const groundGeometry = new THREE.PlaneGeometry( 10, 10 );
const groundMaterial = new THREE.MeshStandardMaterial( { color: 0x808080, side: THREE.DoubleSide } );
const ground = new THREE.Mesh( groundGeometry, groundMaterial );
ground.rotation.x = -Math.PI / 2;
scene.add( ground );
// Add some objects
const boxGeometry = new THREE.BoxGeometry( 1, 1, 1 );
const sphereGeometry = new THREE.SphereGeometry( 0.7, 32, 32 );
const redMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
const blueMaterial = new THREE.MeshStandardMaterial( { color: 0x0000ff } );
const box = new THREE.Mesh( boxGeometry, redMaterial );
box.position.set( -2, 0.5, 0 );
scene.add( box );
const sphere = new THREE.Mesh( sphereGeometry, blueMaterial );
sphere.position.set( 2, 0.7, 0 );
scene.add( sphere );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}Next, we'll introduce a light source. For shadows to be cast, we need a light that can project them. The DirectionalLight is a good choice for simulating sunlight, which casts parallel rays. Remember to enable shadows on the renderer.