Dragging and dropping objects around a scene

When you create an interactive environment, a common requirement is the option to use your mouse to drag objects around. This functionality isn't something that is supported out of the box by Three.js. In this recipe, we'll show you the steps that are needed to implement this functionality.

Getting ready

For this recipe, we only use the functionality that is available in the standard Three.js library. We'll use the THREE.Raycaster object together with THREE.Projector to implement the drag and drop functionality. To see the drag and drop functionality in action, you can open the 07.08-drag-n-drop-object-around-scene.html example in your browser, and you will see something similar to what is shown in the following screenshot:

In this example, you can see a large number of cubes, which you can move individually. Just click on one with the mouse and drag it to a new position. This scene also uses THREE.OrbitControls, so when you click on the white background...