Three.js: THREE.DragControls

[zz85]

The idea for a drag control has been lingering for sometime (had the impression that some were also requesting for this feature), so thanks to @chandlerprall for suggesting the possibly of a "plane-less" moving of objects in issue #1514, I've implemented a THREE.DragControls as illustrated in here.

http://jsfiddle.net/S6Gq9/1/

to use it, one simply have to add

// activate Drag Controls
var dragcontrols = new THREE.DragControls(camera, scene, renderer.domElement); 

one benefit of the planeless version is that its much easier to "inject" into most scenes without adding additional planes" (for example with use with ThreeInspector, and another benefit is that you get less errors when the invisible plane surface is not large enough (esp at the corners of the page).

any other suggestions or bugs with this? perhaps we could have an activate/deactivate function like
dragcontrols.activate() and dragcontrols.deactivate()?

[zz85]

I've added this to threeinspector. Or run this in a console

        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://raw.github.com/zz85/ThreeLabs/master/DragControls.js';
        document.body.appendChild(script);
        script.onload = function(){
            var dragcontrols = new THREE.DragControls(camera, scene, renderer.domElement);
        };

[chandlerprall]

Hmm, this drags objects in an orbit around the camera, not along a particular plane (seems a bit unintuitive to me). Nonetheless I think it's a good start (saw the feature requests in the code) and will be helpful.

[zz85]

nice observation. i was also thinking about this behavior. now i'm changing the behavior back to the camera facing plane. nows its similar to the invisible planes, except calculated with the rays instead.

http://jsfiddle.net/dvDbt/3/

[zz85]

hmm... any ideas how to set a position of an object in real world coordinates? i think this might not work well if you are dragging the child objects of a rotated parent

tried something like

var m = new THREE.Matrix4().setPosition(targetposition);
_selected.object.matrixWorld.copy(m);

but object doesn't seem to move..

[update] looks like issue #431 has some pointers to this... https://github.com/mrdoob/three.js/issues/431#issuecomment-1870389

[zz85]

after playing around with Drag Controls a little more, I think my original implementation is more stable / accurate.

I think the reason why it seems like objects are being dragged around in an orbit is due to the big FOV in the example. I guess it would probably be more intuitive with a small FOV...

https://github.com/zz85/ThreeLabs/commit/db998c318770a797bfc9ecfd06fda782a9c81680

[zz85]

here's another example utilizing DragControls
http://jabtunes.com/labs/3d/spline3editor.html

[mrdoob]

after playing around with Drag Controls a little more, I think my original implementation is more stable / accurate.

Not sure, I find the plane version easier to control.

[zz85]

hmm.. yes, i'm was thinking about this too last night. I think I'm back to square one.

Will try implement a plane version again and see. Also, when snapping / constraining to axis, what do you think is the best way? I had some constrains working but there were just some feeling that something is not intuitive... perhaps orthogonal views might work.

1. approach in your gui - maintain the plane but move using only one axis
2. rotate the plane in the axis orientation
3. behavior in threefabs - when dragged along axis, distance moved is a factor of the mouse distance (pixels rather than 3d world space)

[mrdoob]

I used the 2nd option on ro.me's voxel editor and it wasn't really happy with how it turned out.
I was a bit happier with how it turned out on the gui :)

[lanfeustxiii]

In my case I rotate the plane when I rotate the camera. My camera is configure for an orthogonal view. So my plane is ever orthogonal to the camera's axis, and it allows to calculate deplacement's value. I have a last problem to resolve but otherwise this method is fine :) , it's your second response if I understood. :)

[zz85]

I also tried observing how Sketchup handle its drag behavior - Its kind of interesting

• by default it seems to move things along a xz plane
• at certain angles it would move the object vertically in the y direction
• at certain angles it would snap to the different axis

i'm not exactly too sure the algorithm behind that, but it also seems pretty intuitive. perhaps their orthographic views help too.

[ghost]

look how they do it in sketchup. It uses inference and its amazingly intuitive to use and be used from any camera type.

http://www.youtube.com/watch?v=fFfmIgJqlIw

[zz85]

on the dragcontrols. i just saw pull request #1039 and #1031 on this related topic- not sure why i'm happening to be working on stuff others have done before recently without knowing. though, i tried that and those seems slightly buggy .

[meawoppl]

Be careful with these examples. they use event.clientX vs offsetX. These work fine fullscreen, but b0rk in other situations.

[sensor111]

Would be nice to refresh jsfiddle inks cos seams they doesn't work properly any more - no cubsc only text in output window

[whatnext]

Hello :) I just wanted to point out I created a controller which allows drag rotation of individual objects. Mine uses the position of the mouse click as the center of rotation and locks to a set of rotation axes (by default) along/perpendicular to line of sight. It also works with touch. Just in case anyone is interested... you can read about it and get the code here: https://virtual.blue/point-drag-controls. I haven't tested it too much so it might be a bit rough round the edges. Would be interested in any feedback :)