Multiple SpotLights in Three.js

To achieve multiple spotlights that move individually across your mesh materials, you'll need to create several SpotLight instances and animate them separately. Based on the information available about Three.js lighting, here's how you can approach this:

Creating Multiple SpotLights

You can create multiple SpotLight instances, each with its own parameters and animation path:

JAVASCRIPTCopied
// Create multiple spotlights
const spotlight1 = new THREE.SpotLight(0xffffff, 1);
const spotlight2 = new THREE.SpotLight(0xff0000, 1); // Different color
const spotlight3 = new THREE.SpotLight(0x0000ff, 1); // Different color

// Configure each spotlight
spotlight1.position.set(0, 10, 0);
spotlight1.angle = 0.2;
spotlight1.penumbra = 0.3;
spotlight1.decay = 2;
spotlight1.distance = 50;

// Similar configuration for other spotlights with different positions
spotlight2.position.set(10, 10, 0);
spotlight2.angle = 0.2;
spotlight2.penumbra = 0.3;
spotlight2.decay = 2;
spotlight2.distance = 50;

spotlight3.position.set(-10, 10, 0);
spotlight3.angle = 0.2;
spotlight3.penumbra = 0.3;
spotlight3.decay = 2;
spotlight3.distance = 50;

// Add spotlights to the scene
scene.add(spotlight1);
scene.add(spotlight2);
scene.add(spotlight3);

// Optional: Add spotlight helpers for debugging
const spotLightHelper1 = new THREE.SpotLightHelper(spotlight1);
const spotLightHelper2 = new THREE.SpotLightHelper(spotlight2);
const spotLightHelper3 = new THREE.SpotLightHelper(spotlight3);
scene.add(spotLightHelper1);
scene.add(spotLightHelper2);
scene.add(spotLightHelper3);

Animating Multiple SpotLights

In your animation loop, you can move each spotlight along a different path:

JAVASCRIPTCopied
// In your animation function
function animate() {
    requestAnimationFrame(animate);
    
    // Current time for animation
    const time = Date.now() * 0.001;
    
    // Animate spotlight 1 (circular path)
    spotlight1.position.x = Math.sin(time * 0.7) * 10;
    spotlight1.position.z = Math.cos(time * 0.7) * 10;
    spotlight1.target.position.set(0, 0, 0);
    
    // Animate spotlight 2 (different circular path)
    spotlight2.position.x = Math.sin(time * 0.5 + Math.PI) * 15;
    spotlight2.position.z = Math.cos(time * 0.5 + Math.PI) * 15;
    spotlight2.target.position.set(0, 0, 0);
    
    // Animate spotlight 3 (figure-eight path)
    spotlight3.position.x = Math.sin(time * 0.3) * 12;
    spotlight3.position.z = Math.sin(time * 0.6) * 12;
    spotlight3.target.position.set(0, 0, 0);
    
    // Update spotlight helpers
    spotLightHelper1.update();
    spotLightHelper2.update();
    spotLightHelper3.update();
    
    renderer.render(scene, camera);
}

Important Considerations

1. Target Objects: Each SpotLight needs a target object to determine its direction. You can set this with:

JAVASCRIPTCopied
spotlight1.target.position.set(x, y, z);
scene.add(spotlight1.target); // Important: add the target to the scene

2. Performance: Multiple dynamic lights can impact performance. Consider:

   • Using fewer lights if performance is an issue
   • Adjusting the quality of shadows (if used)
   • Using simpler materials for less important objects

3. Shadows: If you want your spotlights to cast shadows:

JAVASCRIPTCopied
spotlight1.castShadow = true;
spotlight1.shadow.mapSize.width = 1024;
spotlight1.shadow.mapSize.height = 1024;

By implementing these changes, you should be able to achieve multiple spotlights moving independently across your mesh, each highlighting different areas of your bump map as they move.