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()

Cursor based Parallax

// ...
/**
 * Camera
 */
// Group (used to apply camara parallax without interfering the camera scroll)
const cameraGroup = new THREE.Group()
scene.add(cameraGroup)

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

// ...

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

    // cameraGroup parallax on cursor movement
    const parallaxX = cursor.x
    const parallaxY = - cursor.y
    cameraGroup.position.x = parallaxX
    cameraGroup.position.y = parallaxY
}
// ...