💡 THREE.js Lesson: Lighting Techniques with Controls

Lighting in 3D makes your scenes pop. Use the buttons below to switch between different light setups and see how they affect the sphere.

📦 Code Sample

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js';

const canvas = document.getElementById('previewCanvas');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setClearColor(0x222222);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
camera.position.z = 6;

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(3, 5, 2);
const pointLight = new THREE.PointLight(0xffaa00, 1, 10);
pointLight.position.set(-3, 2, 3);

scene.add(ambientLight, dirLight, pointLight);

function animate() {
  requestAnimationFrame(animate);
  sphere.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

🎮 Live Preview

💡 Quick Tips:

AmbientLight lights everything evenly but lacks shadows.
DirectionalLight casts parallel light rays, great for sun/moon effects.
PointLight shines in all directions from one point, like a light bulb.
Use MeshStandardMaterial or MeshPhysicalMaterial to react well to lighting.

🧠 What You Learned

Different light types affect the mood and realism of your scene.
You can toggle lights on/off dynamically.
Positioning lights impacts shading and highlights on objects.