Lerp is not a function

Questions
,
1 
const sectionHome = document.querySelector('#section-home')
let isScrolling = false
let targetRotation = new THREE.Euler(-4.75, 0, Math.PI / -2);
let transitionSpeed = 0.005; // Adjust this for the desired speed

function doSomething(){
  if (!isScrolling) {
    isScrolling = true
    const initialRotation = model.rotation.clone();
    let startTime = null;

    function updateRotation(timestamp) {
      if (!startTime) startTime = timestamp;
      const elapsedTime = timestamp - startTime;
      const progress = Math.min(elapsedTime / (1000 * transitionSpeed), 1);

      // Use lerp to interpolate rotation smoothly
      const newRotation = new THREE.Euler().copy(initialRotation).lerp(targetRotation, progress);
      model.rotation.copy(newRotation);

      if (progress < 1) {
        requestAnimationFrame(updateRotation);
      }
    }

    requestAnimationFrame(updateRotation);
  }
}
sectionHome.addEventListener('scroll', doSomething)

Console is throwing an error, Uncaught TypeError: (intermediate value).copy(...).lerp is not a function, and I have no idea why this is happening. Anybody have an idea?

2

Euler most likely doesn’t have a lerp function, but either way, lerp looks pretty bad any way, prefer Unity damping

This supports all of threes constructs: vec Euler quat …

dampE(mesh.rotation, [Math.PI / 2, 0, 0], 0.25, delta)

Especially for scrolling you need interruptible damping with velocity and maxVelocity, or else it will feel jerky and skippy. A normal lerp wouldn’t be able to do that.

1 Like
3

ah i think youre right now that you mention it. i dont see lerp mentioned anywhere on the Euler documentation page :confused:

4

lerp() for Euler angles does not exist. The book 3D Math Primer for Graphics and Game Development explains in chapter 8.3.4 Disadvantages of Euler Angles in detail why interpolating between two Euler angles is problematic.

I suggest you represent your orientations as quaternions and then use Quaternion.slerp(),

1 Like