Graphics Reference
In-Depth Information
first intersected object to the
selectedObject
variable, which we used in
step 6 to move the selected cube around. Finally, we need to determine the
offset between the point where we clicked and the center of the plane. We
need this to correctly position the cube in step 6.
10. The last step we need to take is to enable the orbit controller when we re-
lease the mouse button and set the
selectedObject
property back to null:
document.onmouseup = function(event) {
orbit.enabled = true;
selectedObject = null;
}
As you can see, there are plenty of steps you need to take to implement this recipe.
You can also look at the sources from
07.08-drag-n-drop-object-around-
scene.html
, which also contain inline documentation about why certain steps are
needed.
There's more…
This recipe was based on the example from the Three.js website, which you can
find at
http://threejs.org/examples/#webgl_interactive_draggablecubes
.
So, for an-
other example to play around with, you can look at that implementation.
In this recipe, we showed you how you can move the complete mesh around. You
can also use this same approach to move individual vertices, faces, or lines around.
So, with a little bit of effort, you can use this approach to create a kind of sculpting
tool with which you could directly modify a geometry from your browser. For instance,
you could create something like this
http://stephaneginier.com/sculptgl/
.
See also
• In this chapter, we also use
THREE.Raycaster
for the
Adding simple col-
lision detection
recipe. If you want to drag and drop external files onto your
Three.js scene, you can refer to the
Dragging a file from the desktop to the
