Orbit Control.js

Key Features

Smooth Controls

Fluid panning, rotation, and zooming with natural easing and constraints.

Touch/Gesture Support

Native touch and gesture support for mobile and tablet devices.

Customizable

Hundreds of configuration options and custom events for advanced workflows.

Quick Example

index.html

scene.js

control.js


<script> // Load Three.js 
import * as THREE from 'three';

// Load Orbit Control.js
import { OrbitControls } from 'orbit-control.js';

// Basic scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


// Create our camera control
const controls = new OrbitControls(camera, renderer.domElement);

// Standard control settings
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.enablePan = true;
controls.minDistance = 5;
controls.maxDistance = 50;
controls.minPolarAngle = 0; // radians
controls.maxPolarAngle = Math.PI; // radians


// Animation loop
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // only required if controls.enableDamping is true
    renderer.render(scene, camera);
}
animate();