I am trying to drag an object using a Html component in my project. The issue is that it’s working the way I want but there are stutters while I am dragging the object. I am stuck on this for like days and if anyone can help regarding this, I’ll be very grateful.
So in detail here’s the sandbox that can give better visuals of what I tried to make and how far I went: https://codesandbox.io/p/sandbox/dragging-html-5g6nvk
I also made another one but that was just crap, if anyone got a snippet or something similar to this through which I can move it, plz do let me know. Again thanks in advance
I’ve had issues trying to implement smooth dragging but I’m not sure if it’s the same problem. I went to your example and can only sometimes get it dragging which may be a 3D<>2D coordinates conversion issue… but I’m not sure.
In the past the solution for dragging I’ve gone for, and seen in the wild, is capturing the start and stop of dragging and then just tracking the mouse position during that. That way you can set document event listeners to change the state and then pick up that state change in the animation loop to run your raycasting and move the object.
Depending on what you’re trying to do this solution could potentially* work for you.
Thanks for the reply, do you have any working examples of this cause I really don’t wanna go deep in the logic right now. I have been trying to make this work for like weeks and now its just a headache making new logics to make this work.
I found a tutorial that covers how to do this - How to click and drag 3D models in ThreeJS - DEV Community
In their live example, the scene controls seem to catch dragging but hopefully it gives you enough to go on to adapt your code to this approach 
Thanks of the link paul! I am aware of how dragcontrols work, I already tried these approached and I got the issue of the div sometimes not moving, sometimes the object, sometimes both. In one case I made it work fine but it was teleporting to the top left corner again and again
this is the best reference page I have for drag & drop in javascript Draggable objects
@AshhadDevLab I tried running your code sandbox, it seems the drag code is commented out? wasn’t able to get it to work. If you have a version that shows the stuttering I can try to take look!
it’s possible maybe the source of the stuttering is this ray intersection code
event.ray.intersectPlane(floorPlane, planeIntersectPoint);
or it’s something else maybe doing too many re-renders while dragging etc
@Omar_Shehata Hi there, thanks for replying back, the drag is working in my sandbox, the commented part is just another snippet I have removed the comments for a better understanding of the code. I know how dragging works using the useGesture library and DragControls but in my case I am trying to move a geometry when a specific div is dragged and not the object itself.
ok, I think I figured it out, you have to first click on the cube, that changes its color, then you can drag?
the dragging does seem very smooth to me. Does it look different for you? Or am I not seeing/reproing the right thing?
Have you tried adding an FPS monitor to confirm whether the lack of smoothness you’re seeing is due to an FPS drop, or something else?
Okay so here’s the thing, when you click on the boxGeometry a div appears, more like an arrow on a div. Then when you drag the div again not the box the box drags with it and if we drag the box nothing happens, if you want I can still attach the video of what I want.