Hello All,
I’m trying to use DragControls.js to drag a given 3D object along the horizontal plane (XZ).
But it doesn’t seem to uniformly follow the mouse pointer.
I did try using a raycaster on “drag” event, but it did not lead to satisfactory results.
Any help would be really great.
I’ve attached a JsFiddle as well, demonstrating my problem.
https://jsfiddle.net/yxf1zejc/
Thanks
DragControls translates an object in a conceptual plane. The orientation of the plane depends on the camera’s viewing direction and the world position of the dragged object.
Even if you change DragControls so the mentioned plane always represents the XZ plane, the object would not “stick” to the mouse when you drag it around. And I guess this is the behavior you want, right?
A simple example for if you were to write it without DragControls:
https://jsfiddle.net/amitlzkpa/n0t1wq5f/
It’s triggered on mouse move event.
In this example it updates the position of the sphere.
You could also make it intersect on any Plane (not necessarily XZ).
An example integrated with your code:
https://jsfiddle.net/amitlzkpa/c53w8erf/
The benefit of using drag controls here is the compatibility with the OrbitControls and the things it does for the UX when dragging.
The actual positioning has to be recalculated as we need to project from cursor to the XZ plane to get the correct coordinate in space.
Awesome! Thanks all for your help. It’s very useful
I’ve got slightly different approach.
Set that XZ-plane at y-coordinate of the point of intersection with an object. Then calculate the shift between the point of intersection and object’s position. And then take that shift in count, relatively to the point of intersection between raycaster’s ray and the XZ-plane, that was set before.
The example is in this post: Where do I find the spline editor?
Or here: https://hofk.de/main/discourse.threejs/2018/interactiveShape/interactiveShape.html
@amitlzkpa I reproduced your code with release127 of threejs, and just changing the release brings serious bad drag lag effect, any idea what brings this lag effect from new releases ?
Sorry. Just checking this thread.
It seems the example broke after release120.
Lots of potential sources of the cause.
Unfortunately I do not have the time at hand right now to try and figure out a fix.
Maybe the @prisoner849 's approach might work across both releases?