Multiple Light Blending

Add/remove multiple colored lights and blend their effects.

What this code does

- Dynamic Light Addition: click "Add light" to spawn new randomly colored point lights.
- Color Blending: multiple lights blend additively on surfaces creating color mixing.
- HSL Color Generation: lights use random hue with consistent saturation and lightness.
- Individual Controls: each light gets its own GUI folder with color and intensity sliders.
- PBR Surface Response: MeshStandardMaterial responds realistically to multiple light sources.
- Interactive Management: real-time adjustment of each light's properties independently.

JavaScript (plain)

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 200)
camera.position.set(0, 2, 5)

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

document.querySelector('#app').appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.target.set(0, 0.5, 0)
controls.update()

const plane = new THREE.Mesh(
  new THREE.PlaneGeometry(12, 12),
  new THREE.MeshStandardMaterial({ color: 0x101010 })
)
plane.rotation.x = -Math.PI / 2
plane.position.y = 0
plane.receiveShadow = true
scene.add(plane)

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.7, 32, 32),
  new THREE.MeshStandardMaterial({
    color: 0xffffff,
    roughness: 0.35,
    metalness: 0.1
  })
)
sphere.position.set(0, 0.7, 0)
scene.add(sphere)

const lights = []

function addLight() {
  const hue = Math.random()
  const color = new THREE.Color().setHSL(hue, 0.8, 0.6)
  const light = new THREE.PointLight(color, 1.2, 10, 2)
  light.position.set(
    (Math.random() - 0.5) * 6,
    1 + Math.random() * 2,
    (Math.random() - 0.5) * 6
  )
  scene.add(light)

  lights.push(light)
}

// Add initial lights
addLight()
addLight()

function animate() {
  requestAnimationFrame(animate)
  controls.update()
  renderer.render(scene, camera)
}
animate()

← Back