Three.js Point Light Interactive Demo

Interactive three.js point light with real-time controls for position, color, and intensity. Features point light helper visualization and mouse tracking.

What this code does

- Three.js Point Light: omnidirectional light source radiating in all directions from a single point in 3D space.
- PointLight Helper: visual wireframe indicator showing the light's exact position, color, and influence radius.
- Interactive Point Light Controls: real-time GUI sliders for adjusting color, intensity, and position parameters.
- Mouse Light Tracking: point light follows cursor movement when "Follow pointer" mode is enabled.
- PBR Material Response: MeshStandardMaterial demonstrates realistic lighting response to point light changes.
- Point Light Distance Falloff: physically accurate light intensity decrease with distance from source.

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(75, width / height, 0.1, 1000)
camera.position.set(0, 1.2, 3)

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(10, 10),
  new THREE.MeshStandardMaterial({ color: 0x111111 })
)
plane.rotation.x = -Math.PI / 2
scene.add(plane)

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.5, 32, 32),
  new THREE.MeshStandardMaterial({
    color: 0x2299ff,
    roughness: 0.6,
    metalness: 0.1
  })
)
sphere.position.y = 0.5
scene.add(sphere)

const pointLight = new THREE.PointLight(0xff8844, 1.2, 0, 2)
pointLight.position.set(1.2, 1.2, 1.2)
scene.add(pointLight)

const lightHelper = new THREE.PointLightHelper(pointLight, 0.12)
scene.add(lightHelper)

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

← Back