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 
cheers for that Benjamin 
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.
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
This one worked perfectly, thank you so much sir !!! I’m happy people like you share some knowledge 
Gsap and tween js are good for moving things smoothly 
I am using gsap , and all kinds of tweaks , working well do not have any problems , thanks to all you amazing people in this forum
Thanks! This helped me out so much on fluid movements of my game NPC’s and player models. I was having a hard time smoothing out the multiplayer positions trying to get it not to look choppy…It was a little different for me because I am sending and receiving player telemetry data from a database but object.position.lerp(hoverPosition, smoothness) worked great!
