Three.js - Scroll Based Animation

Snippets

Check Scroll Position

 let scrollY = window.scrollY
 window.addEventListener('scroll', () =>
 {
     scrollY = window.scrollY
 
     console.log(scrollY)
 })

Scroll objects in sync to html scroll

// position objects
const objectsDistance = 4
mesh1.position.y = - objectsDistance * 0
mesh2.position.y = - objectsDistance * 1
mesh3.position.y = - objectsDistance * 2
//...
// Calc sizes (HINT-no resize event in this example)
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

//...
// Base camera
const camera = new THREE.PerspectiveCamera(35, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 6
scene.add(camera)

// Control Scrolling
let scrollY = window.scrollY
window.addEventListener('scroll', () => { scrollY = window.scrollY })

// ...

// tick function
const tick = () =>
{
// ...
    // Animate camera
    camera.position.y = - scrollY / sizes.height * objectsDistance // scroll objects in sync to html
// ...
}

tick()