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 ...

Get Three.js Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.