DragControls: Animate mesh back to start position

Questions
,
1

Hi Guys,

I was wondering if there was a way to have the mesh return to it’s original position on drag-end when using drag controls. I have a gltf file with multiple meshes, and each mesh has been assigned to a variable using getObjectByName()
This is what I have so far for the drag controls:

var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );

		dragControls.addEventListener( 'dragstart', function ( event ) 
			{ 
				dragControls.enabled = true;
			
			});
		
		
		dragControls.addEventListener( 'dragend', function ( event ) 

			{ 
				dragControls.enabled = false;
				if (letter_h) letter_h.position.set(-0.04,.02,.05);
				if (letter_o) letter_o.position.set(0.04,.02,.05);
				if (letter_p) letter_p.position.set(0.12,.02,.05);
				
			});

This kinda works, but it snaps back to position. It would be really cool if I could have them animate back to their original position over like 2 seconds. Any help would be greatly appreciated.

2

The animation can be done with GSAP: https://jsfiddle.net/fqcs6epr/

The relevant animation code in the fiddle is:

gsap.to( letter_h.position, {
    duration: 2,
    x: 1,
    y: 0,
    z: 0
} );

which animates the mesh from its current position (0,0,0) to (1,0,0) in two seconds.

1 Like
3

That fixed it! Thank you so much! I sincerely appreciate your help :slight_smile: