Graphics Reference
In-Depth Information
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 sup-
ported 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 individu-
ally. 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, you can
use your mouse to rotate the scene.
How to do it…
For this recipe, we need to take a fair amount of steps:
