Moving camera based on scrolling

Questions
1

I’m trying to move the camera based on scroll, would I be right in thinking I need to use ‘document.addEventListener()’ with something like WheelEvent.DeltaX (WheelEvent - Web APIs | MDN)? Whilst I don’t think it should be that hard to pull off, I can’t find any good tutorials that just uses base threejs to pull this off so any help would be appreciated.

2

If you want classical direction then deltaY.

Look here and here.

3

scroll is kind of hard. there’s a lot of bulk hidden in the implementations. from cross browser nonsense to preventing jerky scrolling, and perhaps the worst, getting pointer events right, so that the dom remains accessible as well as the canvas.

consider this example

you can study dreis ScrollControls component and use something like maath/easing for animation because it has maxSpeed. without velocity based animation and maxSpeed you can scroll really fast and the site will leap over itself (scroll real fast in the example above and you see her move up and down gracefully, this is preferrable).

there are also smooth scroll helpers like lenis

4

Here is a shortened version of what I use to “dolly” in and out:

// Variables
let camspd = 0.1;	// scrolling speed
let camdst = 100;	// starting distance

// After you define the renderer
renderer.domElement.addEventListener('mousewheel', onMouseWheel, {capture: false, passive: false});

// After you define the camera
camera.position.z = camdst;

// Within Render Loop
camera.position.z = camdst;

// MouseWheel Function
function onMouseWheel(event) {
	camdst = camdst + event.deltaY * camspd;
}

The full version of my camera routines also allow you to rotate the camera around a center point (looking in or out) and allow the camera to be attached to selected objects. I can create a simple demo if you would like.

However, if you just want a simple camera control that allows you to rotate around the center point, you can use OrbitControls. This has a built-in dolly function.