Three.js Drag and Drop Tutorials Using DragControls

It’s a pretty common need in 3D programming, especially when creating games, to have the desire to move and object with your mouse or touch gesture. The three.js library makes drag and drop capabilities pretty easy already out of the box, but to simplify the process even further, they’ve provided us with a class called DragControls to handle it. Check out the example below.

Now that you have a general idea of what we’re going to accomplish here, let’s get started.

If you’d like to follow along, I recommend cloning my examples repository below.

Next checkout the starter branch which has some boilerplate code for the example.

Finally, install any dependencies and start the server.

If everything went according to plan, you should be able to go to http://localhost:8080 in your browser and see a basic scene in three.js.

Since we’re going to have a lot of bright colors and such, I’d like to change the background of these scene from black to a very light grey so its a little nicer on the eyes. Add the following below your scene declaration.

When instantiating a new THREE.DragControls instance, the first argument it requires is an array of objects which we would like to add dragging capabilities to. Above the init function, create a new empty array called objects to store them in. We will add them to the array as we create them.

I’m going to be adding 100 spheres in random places within the scene, to make sure they are all in view let’s push the camera back a little bit.

This part is pretty straight forward, let’s add some ambient lighting as well as directional lighting so we can see our objects.

Okay here’s where we will add our objects to the scene. I’ll declare the same geometry above the loop and then dive in and add 100 spheres in random areas within a certain range.

Notice at the end of the loop I’m adding the completed object to the objects array, now it is time to create our DragControls object, we will pass this into the constructor along with our camera and the renderer DOM element.

At this point we will have a working example which has 100 spheres in the scene with drag and drop capabilities. I could stop the tutorial here, but let’s see what else we can do with this class.

It would be nice if I can change the color of the sphere temporarily to something recognizable while I’m dragging it so I can tell it apart from the others much easier. The workflow here is as follows:

  1. Use the dragstart event listener to store the original color and change it to a new one.
  2. Use the dragend event listener to restore the original color on the object

To store the color you will need to create a global variable above the init function like this:

Great, now lets add our event listeners below the THREE.DragControls initiator.

Lastly, below our init function, create two functions called dragStartCallback and dragEndCallback. This will have event as a parameter which we can use to find the object being dragged and fetch the color from it.

Now when we drag a sphere it will be changed to the color black and returned to its original state once we let it go. Pretty simple but it shows you the capabilities of this class. I recommend exploring the rest of the DragControls class to see all of its capabilities as it is shipped with some more goodies to play with.

I hope you enjoyed this tutorial, thanks for reading!

Leave a Reply