Smooth transition

Hello Folks,

how do i add a smooth transition to the position of an object

currently its working working but it snaps to position, instead of smoothly transitioning

function setDefaultPositionLogo() {
    //time *= .0001;

    Obj.getObjectByName('GltfObj').position.z -= .0001;

}

i am calling this function inside the animate() function, which works , but snaps to the position, a smooth transition is what i am after

Cheers

const object = Obj.getObjectByName('GltfObj');
const smoothness= 0.1 // 0 to 1 only

const targetPosition = object.position.clone();
targetPosition.z -= 0.5;

function animate(delta) {
    object.position.lerp(targetPosition, smoothness);
}

Learn more about lerping :wink:

cheers for that Benjamin :grinning:

well, thought it worked , but i does not work as intended ?

what id like to achieve is very simple , we do that most of the time in css / javascript ,
event-listner, listen to the mouse move on a div , and when its on the div , move the div ,
if its not on the div then transition back to the original position with ease,

so this is what i am trying to do ,
but with the gltf object raycaster ,

while the mouse is on the selected Gltf object (which is the raycaster loop),
then move the gltf object forward to a specified position , ( which is working )

if not on the selected GLTF object , transition with ease to the original position ,
which i am not able achieve ?

what i have got so far is while on the selected GLTF object and if the mouse pointer Y is at a certain value , the gltf object moves forward,

but unable to get it transitioning to its original position , tried the lerp function for this , does not seem to work

I am absolutely sure this must have be a a simple function call for this , or a method to do this

Cheers

Ok so

// where the original position will be stored
let originalPosition = new Vector3();

// the position you want the objec tot be on hover
let hoverPosition new Vector3(); // set it to what ever you like

// lets say this is the glb being loaded
function onload(Obj){
   const object = Obj.getObjectByName('GltfObj'); // the object you want to be used

    // store the position to "originalPosition"
   originalPosition.copy(object.position) // this should be done once
}


function update(){

   // if the object is on hover this should be "true" else "false"
   if(true) object.position.lerp(hoverPosition, smoothness); // will go to the hover position
   else object.position.lerp(originalPosition , smoothness); // will go back to original position
}

I hope that this helps

You haven’t included the code where you animate the value of smoothness, but if you didn’t implement an ease in and out, you can pass…

sin(smoothness * Math.PI) /* smoothness between 0-1*/

…into your lerp functions.

Just a small remark.
Sine gives -1..1 value.
Math.sin(something) * 0.5 + 0.5 will give 0..1.

1 Like

cheers Paul / keelan,

will add the update code , hopefully i could get this working

Hi Paul ,

would be great if i could get an fiddle example , of just a box, does not have to be a gltf object, reckon same principal applies ,

mouse hover on the box,
box rotates (not the camera) a ceratin degrees left and right with the mouse moving left and right on the box (not the canvas)

and on mouse exit the box object, the box eases back to its original position,

would appritiate a lot if i could a js fiddle for this behaviour,

Thanks