Three.js Demos A collection of Three.js Demos

Orbit Controls Playground

Interactive orbital camera with damping and auto-rotation controls.

What this code does

- OrbitControls: enables mouse/touch interaction for camera movement around a target.
- Damping: smooths camera movement for more natural feel when enabled.
- Auto Rotate: continuously rotates camera around the target automatically.
- Limits: restrict zoom distance and polar angles to constrain movement.
- Interactive Controls: real-time GUI adjustment of all OrbitControls parameters.
- Reference Objects: scattered spheres and grid helper provide spatial context.

JavaScript (plain)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(5, 5, 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.enableDamping = true
controls.dampingFactor = 0.05
controls.autoRotate = true

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial({ color: 0x4a9eff })
const cube = new THREE.Mesh(geometry, material)

scene.add(cube)

const ambientLight = new THREE.AmbientLight(0xffffff, 0.3)
scene.add(ambientLight)

const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
directionalLight.position.set(10, 10, 5)
scene.add(directionalLight)

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