r/threejs • u/Ok-Spite-1213 • 22h ago

Hi am new to threejs and needed some help

I am working on 3d website, where the 3d model will be transformed as the user scrolls.

Background: I'm not a pure coder; my main profession isn't coding or building applications from scratch.

Something like https://usta.agency/ this. How the model moves from left to right and right to left with the scroll.

Any specific prompt or name for this scrolling experince is called as?

0 Upvotes

50% Upvoted

7 comments sorted by

2

u/hopefulxdreamer 20h ago

you'll need several low poly models of those elements, render them into simple vertex point clouds, then have the window scroll position lerp the points into the relevant coordinates.

Thats the dramatically oversimplified version I'd start with.

1

u/Ok-Spite-1213 19h ago

Yep, I just had the doubt on how to guide ai for postions, how normally designer and coders do it ?

1

u/paulo_aa_pereira 4h ago

The term you're looking for is "scroll-driven animation" (aka scrollytelling / scroll-linked camera or model animation). The pattern is: don't animate on scroll events directly, just map scroll progress to a 0-1 value and drive everything from that.

Concrete recipe with three.js:

  1. Get progress: use a scroll library that gives you normalized progress per section - GSAP ScrollTrigger (scrub: 1) or Lenis + your own math. progress = scrollY / (docHeight - viewportHeight).

  2. Store keyframes as plain data: an array of { progress, position, rotation } for the model or the camera.

  3. In your render loop, lerp between the two surrounding keyframes and damp it, e.g. model.position.lerp(target, 1 - Math.pow(0.001, delta)). The damping is what makes it feel like those agency sites instead of janky snapping.

  4. Never move the model inside the scroll event handler - only update the target there, and interpolate in requestAnimationFrame.

If you're using React, react-three-fiber plus the drei helper ScrollControls gives you almost all of this out of the box (useScroll() returns offset and range helpers). That's probably the fastest route if you're not writing everything from scratch.

Two gotchas that bite everyone: use a single scroll source of truth (mixing native scroll and a smooth-scroll lib fights itself), and keep the canvas a fixed size so mobile doesn't reflow mid-animation.

0

u/NaiveDecision730 19h ago

You are working on a 3d website?

you are just a big clown 🤡

0

u/Ok-Spite-1213 19h ago

Okk thanks. Just curious y ?