Managing lenis.scrollTo using Three.js object positions

[mokargas]

I'm a bit stuck on this. I have some objects in my Three.js scene.

When clicked, I'd like to use the scrollTo function to move to them, via the camera. I think this is the only API available. I'm currently using the progress value from lenis.on({progress}) to move my camera like so (the camera moves in a corkscrew):

   const clampedScrollProgress = Math.min(Math.max(scrollProgress.value, 0), 1);
      const interpolatedY = handoverPosition.y + (finalPosition.y - handoverPosition.y) * clampedScrollProgress;

      const angle = initialAngle + clampedScrollProgress * totalRotation;

      const radius = handoverPosition.distanceTo(finalPosition) / 2; 
      const xPos = radius * Math.sin(angle);
      const zPos = radius * Math.cos(angle);
      camera.position.set(xPos, interpolatedY, zPos);

      const centerPoint = interpolatedYVector.set(0, interpolatedY, 0);
      camera.lookAt(centerPoint);
      camera.updateProjectionMatrix();

I can get the window cordinates of an object, with something like this:

function windowCoordinates(position, camera) {
  const halfWidth = window.innerWidth * 0.5;
  const halfHeight = window.innerHeight * 0.5;
  position.project(camera)

  const x = (position.x * halfWidth) + halfWidth
  const y = -(position.y * halfHeight) + halfHeight
  return {x,y}
}

Course, I can't just plug the y into lenis.scrollTo(), the camera will jump deep into the scene. So how can I map object positions to the scroller?

[iamlinkus]

This is not a lenis specific question. And you've also answered your own question within your question: you have to write a function that maps the scroll progress to the objects position.

I'm not going to provide you with a full solution but something that might help you get on the path is:

1. You have to know all the positions where you need your camera to stop. You can calculate it programmatically or you can, for example, have the camera movement exported from something like blender using keyframes. This is not something that others without knowing the specifics of your project can calculate or write out in a function for you.
2. Use something like a gsap timeline, which can help you immensely in creating intricate animations using timelines. The best part of using a gsap timeline is that when creating your timeline you can add labels to each of the stop of your camera movement.
3. Once you have a gsap timeline, you can animate between those labels super easily.

This is the exact approach I used for one of my projects: https://joinercad.com/ (the scrollytelling section in the homepage).

[mokargas]

You're right, it wasn't a Lenis question and I solved it a while back after realizing that. For some reason I thought perhaps progress could be fed in reverse to the scroller by setting scroll progress somehow. I was thrown by the fact that in my case, the scene was fully 3D but the scroller is returning a normalized value and I didn't grok that relationship.

I previously animated on a pre-built path using Blender as you said (you can export these to JSON and then CatmullRom3 even) but this wasn't required in this instance.

Additional libraries like GSAP weren't required either, nor were window-based co-ordinates. All I needed to do was position the objects I needed to scroll between equally (which I required anyway). Then, since I know how many objects there are and the height of the scrollable content, it basically became

pos = 1.0 / count * obj_id * contentHeight:

2024-02-10.20-35-11.mp4

I do like the sound of the GSAP labels, though typically in full 3D I use React-Spring. Your site is very smooth!

[iamlinkus]

Glad you figured it out! Your webgl scene looks amazing! :)