Dragging 3D objects using mouse in three.js

Questions
1

I need to drag a 3d object using mouse. The 3d objects has its face coloured and edges shown.The problems I am facing are:
1.I want to move the 3d objects and the edges together. Now, either the 3D object with face or the edges only moves, not both.
2. Even the mouse is clicked it doesnt deselect the object.It keeps on following the mouse cursor.

Screenshot (5)
Screenshot (5)1919×858 36.4 KB
Screenshot (6)
Screenshot (6)1919×900 27.1 KB

I have uploaded the screen shot here.

2

Hi!
You can add edges as a child to the main object, thus you can move them together.

изображение

2 Likes
3

I have added the code snippet here .But still it doesnt work as expected.
I am using DragControls instead of raycaster. Is it the reason why it is not working for me?

Screenshot (9)
Screenshot (9)1919×855 37.1 KB

var pyramidgeometry = new THREE.CylinderBufferGeometry(0, 2, 5, 4, false);

var pyramidmaterial = new THREE.MeshBasicMaterial({wireframe: false, color: 0xDDDDDD, transparent:true, opacity:0.5});

var pyramid = new THREE.Mesh(pyramidgeometry, pyramidmaterial);

scene.add(pyramid);

var edges = new THREE.EdgesGeometry( pyramidgeometry);

var lines = new THREE.LineSegments(edges,new THREE.LineBasicMaterial({color:“orange”}));
pyramid.add(lines);
objects.push(pyramid);

4

Yeah, DradControls internally perform this internally.
var intersects = _raycaster.intersectObjects( _objects, true );

It means that it traverse the objects and picks their childrend too. From my point of view, it’s confusing behaviour. Maybe contols need an additional boolean parameter to turn the traversing of objects on/off.

I don’t have that issue in my example because I dont’ use traversing of objects:
var intersects = raycaster.intersectObjects([pyramid]); // without the second parameter

1 Like
5

We are trying to improve this :innocent: , see

1 Like
6

Sir, i got it working. But it doesnt look like dragging a static object. When i am dragging it, it seems like rotating. I have attached 2 screenshots for reference.

Screenshot (11)
Screenshot (11)1837×844 25.2 KB
Screenshot (13)
Screenshot (13)1919×858 32.7 KB

Have a look at the base quadrilateral, it is evident.
And @Mugen, i am really glad I asked this question here.Its always good to know three.js is improving everyday and I am on the right path. Cheers. Have a good day.

7

Relevant replies like this makes people like me work more on this. Thanks alot. Have a good day.

8

Hello. I used your Raycaster code and I am able to move my object as expected.

But, when I let go of the left mouse button and move the mouse, the scene rotates even though I am not clicking.

I added an alert just to make sure that the “pointerup” event is happening and it is.

		document.addEventListener("pointerup", () => {
			isDragging = false;
		  dragObject = null;
		  controls.enabled = true;
		  
		  alert("UP");
		} );

Any ideas?
Thanks

9

Hello, what if instead of one plane, there were multiple planes so that pNormal is not constant as written in the code. Please help me with dragging over more than one plane. Thanks.