How to Rotate Objects Using Transform control in Three JS

nside every 3D design software, we have the tools for translating the object, meaning we have a


button for transferring the object from one point to the other. In addition to that, we have tools for


rotating the object and also scaling it. These three are the essential tools for every 3D design


application. But imagine a 3D app (software or web application) without orbit controls (having a


360-degree view or rotating around the object); this will result in an annoying user-interactive


software everyone hates at first glance. Consequently, every 3D software design app consists of


some must-have tools. These essential utilities are, transform controls, and orbit controls, and


Three.js is no exception.


In this article, we will start from a boilerplate project using the Vite plugin, and then we will


modify the script to have all sorts of controls around the object. Some keys on the keyboard will


activate the rotation, translation, and scaling tools, each separately. We will also have orbit


controls to see everything clearly from all aspects.

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 TransformControls



cd TransformControls

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 TransformControls



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

The code:

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

import * as THREE from 'three';


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


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


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

const scene = new THREE.Scene();


scene.add(new THREE.AxesHelper(5));

const camera = new THREE.PerspectiveCamera(


75,


window.innerWidth / window.innerHeight,


0.1,


1000


);

camera.position.z = 2;


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.MeshNormalMaterial({ transparent : true });


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


scene.add(cube);


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


const transformControls = new TransformControls(camera, renderer.domElement);


transformControls.attach(cube);


transformControls.setMode('rotate');


scene.add(transformControls);

transformControls.addEventListener('dragging-changed', function (event) {


orbitControls.enabled = !event.value;


});

window.addEventListener('keydown', function (event) {


switch (event.key) {


case 't':


transformControls.setMode('translate');


break;


case 'r':


transformControls.setMode('rotate');


break;


case 's':


transformControls.setMode('scale');


Break;


}


})

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();


}

function render() {


renderer.render(scene, camera);


}

animate();

Now if we save the code, and enter the following command in the terminal:

Coppied to clipboard.

npm run dev

We should see the following result:

You can rotate the cube if you click on the blue, red or green rings and move them. If


you press the “t” on the keyboard, you will see:

You can move the object using the arrows given. And if you press the “s” button, you


will be able to see:

You can scale the object in all the directions. Notice that in all three states you can


move around the object and have orbit controls, Which will give you a perfect view.

Explaining the code:

The first thing we did at the beginning was to import the necessary libraries for the


orbit controls, and the transform controls in addition to other dependency libraries.


Then, we defined the scene, camera, renderer, geometry, and material just as we did


in our recent tutorials on Three JS. Afterward, we defined the transform control and


added the cube to it to be able to apply them to the object. We also defined the orbit


controls. To activate each one of the transform controls (rotation, translation, and


scaling), we added an event listener and used the switch case statement for each of


the transform controls. Moreover, we added another event listener for the orbit


controls so that the user can easily interact with the scene. In the end, we animated


the object using the animation function.

Conclusion

n this tutorial, we implemented the transform controls, including the rotation,


translation, and scaling, in addition to orbit controls which give the user the ability


to move around the object and see it from all aspects. Using such a script, you


can easily create a user-interactive 3D design application or even a game. As you


know, one of the essential tools for every 3D user-interactive app or game is orbit


controls and transform controls. Transform control lets the user rotate objects,


and move and scale them in Three JS.


We hope this tutorial has helped you solve the challenge that you have had


in Three JS. We have covered this tutorial in a video so that you can understand


this article more deeply.

Download this Article in PDF format

Arashtad Custom Services

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/3d/webgl/threejs/how-to-rotate-objects-using-transform-control-in-three-js/