Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
OrbitControls
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
In this lesson, we’re going to make our 3D scenes more interactive and user-friendly by adding OrbitControls. With just a mouse or a simple touch gesture, your users will be able to , , and around your scene — making it feel alive and fully explorable.
At its core, is a helper utility that comes with .
It allows users to take control of the camera — no coding required.
Here’s what it lets you do:
This is perfect for things like product viewers, 3D maps, or any kind of immersive scene.
It’s simple: makes your 3D experience more intuitive.
Instead of forcing users to sit in a fixed camera view, you give them the power to explore.
Whether you’re showing off a 3D model or creating a game environment — interactivity is key, and this tool gets you there fast.
If you're using Vite, Webpack, or any modern JS bundler, you can import OrbitControls like this:
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";Once imported, connecting your camera and renderer is just one line:
const controls = new OrbitControls(camera, renderer.domElement);Now, your scene is already interactive — try clicking and dragging!
When you first initialize , here’s what it does out of the box:
By default, the camera orbits around the point , but you can easily change that.
Want the camera to orbit around something else? Just set the target manually:
controls.target.set(1, 2, 3);Enable or Disable Features You can fine-tune the user experience. Want to prevent zooming? Or disable rotation entirely? You’ve got options:
controls.enableRotate = false;
controls.enablePan = true;
controls.enableZoom = false;Want a more polished, natural-feeling interaction? Enable damping — it simulates inertia, making movements smooth and gradual:
controls.enableDamping = true;
controls.dampingFactor = 0.1; // 0.05 is defaultYou can also make the camera spin around your scene automatically — great for demo views or idle animations:
controls.autoRotate = true;
controls.autoRotateSpeed = 1.0; // Default is 2.0Prevent users from zooming too far in or out with:
controls.minDistance = 2;
controls.maxDistance = 10;To limit where the user can look vertically (polar angle):
controls.maxPolarAngle = Math.PI / 2;controls.maxAzimuthAngle = Math.PI / 4;Here’s a complete example that adds a cube and lets you orbit around it:
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.1;
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();Now your scenes aren’t just visible — they’re interactive. Try tweaking the damping, target, or auto-rotation speed to see how it affects the feel of your scene.
Every adjustment brings you closer to creating an immersive, user-friendly 3D experience. 🚀
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.