Cant drag object in the canvas, but the camera is moving

Questions
,
1

Hello everybody, i’m very new to three js and i got stuck in dragging an object from in the scene.

please check the jsfiddle link below.
http://jsfiddle.net/pfwqb2c8/

when you add object it doesn;t appear right away. when you move the camera, then the object gets created but when we try to click the object and drag, instead of the object the camera tends to move.

Any help will be greatly appreciated

2

I would start by disabling OrbitControls as this will be moving your camera as you click and drag. Once you’ve done that, it may highlight the real problem with trying to drag objects.

Have you looked at this example - https://threejs.org/examples/webgl_interactive_draggablecubes.html

It may highlight what you’re missing.

3

Thank you @danlong, for the quick reply. now it is working fine as expected. one more thing how can i drag an object in an specific position like the image below
threejs

I want to show the markings as well like the image. can you please guide me from i can start.
i cant find to a good tutorial. I dont want the code, i want to do it myselft. i just need you to help me start.

Thank you

4

For the markings, you probably want to look at the Raycaster - https://threejs.org/docs/#api/en/core/Raycaster
This has some helpful methods where you can work out the distance between your object and the bounding box.

In terms of moving the object within a boundary, you need to work out the bounding box you want to move your object in and then whilst you are dragging clamp the X, Y and Z position. Remember though, that the origin of the mesh is in the center (0,0,0) by default so you need to account for this when moving it and clamping it’s position.

5

Thank you very much @danlong for the guide.