How to Use Orbit Controls: A Complete Guide

In Three JS, we have many different ways of rendering objects. One of them is orbit controls,


When we use orbit controls, we want to have a 360-degree view of the object; meaning that we


want to move around the object with complete freedom. And when we use orbit controls, we can


use many other animations for the object and these two won’t interfere with each other. Suppose


you want to animate a rotating sphere, which simulates the globe (planet earth) and at the same


time, you want to give the user the capability to move around the object in 360 degrees, Orbit


control is the way to do it.


In this tutorial, we will get started with the Vite plugin and then enter our boilerplate code.


Afterward, we will modify the code and add the orbit controls to our rendering, so that the user


can have the freedom to rotate around the object that is also rotating.

Getting started with the basics:

We are going to get started with the simple elements of a Three js scene including


the camera, the renderer, the scene, the object and the light source (if necessary).


Before we do that, we’d rather use the Vite plugin to be able to easily create all the


folders and file that you need to run the Three.js code. First off, create a folder in the


directory of your projects by using the following commands:

Coppied to clipboard.

mkdir Textures



cd OrbitControls

Then, inside of the your project folder, create the necessary files and folders by


simply running the Vite plugin command:

Coppied to clipboard.

npm create vite@latest

Then enter the name of the project. You can write the name of your project as the


name. And also the package (the name is arbitrary and you can choose anything


that you want). Then select vanilla as the framework and variant. After that, enter the


following commands in the terminal:

Coppied to clipboard.

cd OrbitControls



npm install

Afterwards, you can enter the javascript code that you want to write in the main.js


file. So, we will enter the base or template code for running every project with an


animating object, such as an sphere. Also do not forget to install Three.js package


library every time create a project:

Coppied to clipboard.

npm install three

Now, enter the following script in the main.js file:

import * as THREE from 'three';


import { Mesh } from 'three';


const scene = new THREE.Scene();


const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight , 0.1, 1000);


const renderer = new THREE.WebGLRenderer({


antialias : true


});


renderer.setSize(innerWidth, innerHeight);


document.body.appendChild(renderer.domElement);


//creating a sphere


const geometry = new THREE.SphereGeometry(5, 50, 50);


const material = new THREE.MeshBasicMaterial({


color:0x3268F8


});


const sphere = new THREE.Mesh(geometry,material);


scene.add(sphere);


camera.position.z = 15;


function animate(){


requestAnimationFrame(animate);


renderer.render(scene,camera);


sphere.rotation.y += 0.003;


}


animate();

The above code can be used as a boilerplate for later projects. The output of this


code will be blue sphere like the below photo. But to be able to show that, you


should write the following command in the terminal:

Coppied to clipboard.

npm run dev

What is orbit control in 3 js:

In Three JS, we use orbit controls for showing a 360-degree view of the scene. The


The 360-degree view is very popular among designers since many objects and


scenes are represented this way, disregarding the fact that the object or the camera


may need to be rotated or have a certain kind of animation. In the next part of this


article, we will write the modify the code of the boilerplate in a way that we have orbit


controls in addition to the rotation animation.

Three.js texture scripts:

The first thing we do is to import the libraries of Three js as we have done it in the


boilerplate. Afterward, we will import the {OrbitControls} and Stats modules


from their directory at node modules. Notice that if you are not working with the Vite


plugin, the directory might be in a different address. The below script is the modified


version of the boilerplate code. Notice that in order to clearly see if the orbit control is


working, we have added a Polka dot texture like below. You can add any other


texture of your choice to make sure you can turn around the object and see


everything from all aspects. Now let’s see what the modified code looks like:

import * as THREE from '/node_modules/three/build/three.module.js';


import { Mesh } from 'three';


import {OrbitControls} from "/node_modules/three/examples/jsm/controls/OrbitControls.js";


import Stats from "/node_modules/three/examples/jsm/libs/stats.module.js";

const scene = new THREE.Scene();


const camera = new THREE.PerspectiveCamera(75,innerWidth / innerHeight, 0.1, 1000);


const renderer = new THREE.WebGLRenderer({


antialias : true


});


renderer.setSize(innerWidth, innerHeight);


document.body.appendChild(renderer.domElement);


const controls = new OrbitControls(camera, renderer.domElement);


//creating a sphere


const geometry = new THREE.SphereGeometry(5, 50, 50);


const material = new THREE.MeshBasicMaterial({


map : new THREE.TextureLoader().load('./img/polkadot.jpg');


})


const sphere = new THREE.Mesh(geometry, material);


scene.add(sphere);


camera.position.z = 15;


window.addEventListener('resize', onWindowResize, false);


function onWindowResize(){


camera.aspect = window.innerWidth / window.innerHeight;


camera.updateProjectionMatrix();


renderer.setSize(window.innerWidth, window.innerHeight);


render();


}


const stats = Stats();


document.body.appendChild(stats.dom);


function animate() {


requestAnimationFrame(animate);


render();


stats.update();


sphere.rotation.y += 0.008;


}

function render() {


renderer.render(scene, camera);


}


animate();

Once we save the code, we will see a result like this:

You will also see that not only is the ball rotating, but you can also have a 360-degree view


of the object as well. If you want to use texture, make sure you add it in the


same directory and name as mentioned in the code. Otherwise, change the directory


and the name.

map : new THREE.TextureLoader().load('./img/polkadot.jpg');

Conclusion

In this article, we have covered how we can use orbit controls to have 360-degree


view of the object. We also saw that using this tool, we can still have our own


animations such as the rotation of the object or the light source. Moreover, we


learned about the code behind orbit controls, how to write it and what libraries


you need to import in order to use the orbit controls tool.


The example that we covered was creating a polka dot sphere which is


rotating around itself and it is possible to turn around the object and look at it from


all aspects. There are controls similar to orbit controls such as track bar control.


But the main tool which enables you to have 360-degree freedom of view is the orbit


controls.

Download this Article in PDF format

Care to Know Us More?

In Arashtad, we have gathered a professional team of developers who are working in fields such as 3D websites, 3D games, metaverses, and other types of WebGL and 3D applications as well as blockchain developemnet.

Visit Our Services

Arashtad Serivces

Drop us a message and tell us about your ideas.

Fill in the Form

Blockchain Development
https://blog.arashtad.com/blog/how-to-use-orbit-controls-a-complete-guide/