Skip to content

OrbitControls

Import

import { OrbitControls } from '@react-three/drei'

Video Lecture

Section Video Links
OrbitControls OrbitControls OrbitControls 

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

  • One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
  • After successful purchase, the video will automatically start playing.
  • You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
  • Do not refresh the browser since it will invalidate the session.
  • If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
  • This Pay Per View option does not permit downloading this video for later viewing or sharing.
  • All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

Description

Let's add another Three.js module, but again via a Drei import. The OrbitControls.

Update your existing Stats import statement to also import OrbitControls.

import { Stats, OrbitControls } from '@react-three/drei'

And add the <OrbitControls/> tag to the end of the JSX, just before the <Stats /> tag.

./src/App.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Canvas } from '@react-three/fiber'
import Polyhedron from './Polyhedron'
import * as THREE from 'three'
import { Stats, OrbitControls } from '@react-three/drei'

export default function App() {
  const polyhedron = [
    new THREE.BoxGeometry(),
    new THREE.SphereGeometry(0.785398),
    new THREE.DodecahedronGeometry(0.785398),
  ]

  return (
    <Canvas camera={{ position: [0, 0, 3] }}>
      <Polyhedron position={[-0.75, -0.75, 0]} polyhedron={polyhedron} />
      <Polyhedron position={[0.75, -0.75, 0]} polyhedron={polyhedron} />
      <Polyhedron position={[-0.75, 0.75, 0]} polyhedron={polyhedron} />
      <Polyhedron position={[0.75, 0.75, 0]} polyhedron={polyhedron} />
      <OrbitControls />
      <Stats />
    </Canvas>
  )
}

The OrbitControls has many properties that can be modified.

See the official documentation at THREE.OrbitControls for all properties and methods.

By default, the Drei OrbitControls has enableDamping set to true. When you let go of the mouse, it continues to rotate but slow down.

You can disable damping by using the tag,

<OrbitControls enableDamping={false} />

The OrbitControls allows panning, rotating and zooming. You can enable/disable each of these. The below JSX disables panning and rotation, but still allows zooming. All three properties are true by default.

<OrbitControls enablePan={false} enableRotate={false} />

You can limit the amount of rotation up/down left/right.

<OrbitControls
  minAzimuthAngle={-Math.PI / 4}
  maxAzimuthAngle={Math.PI / 4}
  minPolarAngle={Math.PI / 6}
  maxPolarAngle={Math.PI - Math.PI / 6}
/>

Working Example

<>
Controls drei
OrbitControls threejs.org sbcode.net

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout orbitControls
npm install
npm start