How to add Orbit Controls to a ThreeJS scene in ReactJS
![Oscar de la Hera Gomez](https://www.delasign.com/CDN/headshots/profile.webp)
![Two flowers that represent ReactJS and ThreeJS side by side. Beneath them sits the text "Orbit Controls."](https://www.delasign.com/CDN/images/How-to-pass-data-from-a-vertex-shader-to-a-fragment-shader-in-ThreeJS_2023-11-08-204527_uvxe.webp)
Import the Orbit Controls, set them up and update them in the animation frame.
We recommend that you clone our Open Source React-Redux Starter Project, checking out the tutorial/three-js/starter branch and carrying out the steps below. The changes can be found on the tutorial/three-js/orbital-controls branch.
git clone git@github.com:delasign/react-redux-starter-project.git
Step One: Setup the Project
![A screenshot of chrome showing the cube geometry and the shader material.](https://www.delasign.com/CDN/images/Test_2023-11-08-160028_tejp.webp)
Follow the tutorial below to learn how to create a ThreeJS project that implements a shader on a box geometry.
Step Two: Import the Controls
![A screenshot of VSCode highlighting how to import the orbit controls.](https://www.delasign.com/CDN/images/import-Library.webp)
At the top of your file, import the Orbit Controls.
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
Step Three: Initialize the Controls
![A screenshot of VSCode highlighting how to setup the orbit controls.](https://www.delasign.com/CDN/images/Setup-Camera.webp)
Within your react component, after declaring camera and renderer, initialize the Orbit Controls using code similar to the one below.
const controls = new OrbitControls( camera, renderer.domElement );
Step Four: Update Controls in Animation
![A screenshot of VSCode highlighting that you need to update the controls in the animation frame.](https://www.delasign.com/CDN/images/Update-Camera.webp)
Within your animation loop, call the following function:
controls.update()
Step Five: Test
![A screenshot of Chrome showing that the orbit controls work and that the cube can now be seen from different angles and distances.](https://www.delasign.com/CDN/images/Test_2023-11-08-205052_vifb.webp)
Run the code and confirm that you can now rotate, move and zoom in and out using your trackpad and keyboard.
Looking to learn more about ReactJS and ThreeJS ?
Search our blog to find educational content on learning how to use ReactJS and ThreeJS.