# threejs lerp and camera the animation is not smooth

what is the problem with linear interpolation?
in update() in case this is animate() and when I call zoomCamera() in update() there is lerp with smooth but when I call here

function onObjectsClick(event) {
event.preventDefault();
setPickPosition(event);
raycasting(pickPosition, scene, camera);
pickedObject = intersectedObjects[0].object;
const notebook = pickedObject.getObjectByName('notebook');
const laptop = pickedObject.getObjectByName('laptop');

if (notebook || laptop) {

zoomCamera();
}

}


in if there is no smooth lerp but sharp transition what I miss?

function zoomCamera() {
const vec = new THREE.Vector3(-1, 2, 2);
const alpha = .1;
camera.position.lerp(vec, alpha);
console.log('zoom');
}


and the onObjectsClick is in animate()
why it is happened?

• "and the onObjectsClick is in animate()" → Could you add what that code looks like? Do you mean onObjectsClick is defined inside animate, or called inside animate?
– Anko
Oct 3 '19 at 10:33
• solved in stackoverflow the same topic Oct 3 '19 at 16:10
• Could you link that question please, for future readers? (Also, avoid posting to both sites in the future. It wastes people's time, since we can't see their answers and they can't see ours.)
– Anko
Oct 4 '19 at 10:08
• stackoverflow.com/questions/58190718/… Oct 4 '19 at 10:16

Unfortunately there are many ways to do what your asking and from the info you have here it's very hard to tell what's going on. We're missing a lot of information.

It appears to me that zoomCamera(); in onObjectsClick(event) is not an "Updated" but a single frame function.

It appears to me that you are using lerp in a way that it's not really designed for. Don't get me wrong, if it works then awesome. But lerp is typically a value between 0% and 100%. So, you need to get the percentage of where you want it to be along its trip. Here, take a look at what I have here written in C#. Plug it into a fresh script and drag the script onto the camera. press the "M" and you'll see it lerps. You can adapt this to "slerp" or Spherical Lerp very easily. slerp is a lerp on a sign wave function. Looks smoother but fundamentally the same thing. I hope this helps you learn about Lerp and how it's supposed to work.

LERP REQUIRES: A static start point. A static end point. A static start time. A static length (of time or anything really).

If you update any of these values while it's lerping you'll likely end up with an infinite lerp (which can look smooth sometimes) or just a quick pop from one place to another. Like I said, use it how you like. What ever gets the effect you're looking for but this is likely one of the more optimal (performance wise) ways to use lerp.

public class CameraLerp : MonoBehaviour
{

public Vector3 camPosStart;
public Vector3 camPosTarget;
public float lerpStartTime;
public float lerpTimeLength = 5f;
public bool lerping;

private void Update()
{
MoveCamera();
}

private void MoveCamera()
{

//every time you press m the camera will move 10 on the z axis (world space).
//This will work for any vector3's.  Just input the start time as Time.time and the
//startPos as the currect Vector3's value.  The target as the target value
if (Input.GetKeyDown(KeyCode.M))
{
lerpStartTime = Time.time;
camPosStart = Camera.main.transform.position;
camPosTarget += new Vector3(0, 0, 10f);  //this should be set to what ever you want the camera position to lerp to.
lerping = true;
}

if (Camera.main.transform.position == camPosTarget)
{
lerping = false;
}

if (lerping)
{
Camera.main.transform.position = Vec3Lerp(camPosStart, camPosTarget, lerpStartTime, lerpTimeLength);
}
}

private Vector3 Vec3Lerp(Vector3 start, Vector3 target, float startTime, float timeLength)
{
float timeLerping = Time.time - startTime;

float percentageComplete = timeLerping / timeLength;

Vector3 result = Vector3.Lerp(start, target, percentageComplete);

return result;
}
}