Unfamiliar with Three.js, curious how to create this effect

Hi there!

I was wondering if someone could explain to me the principles behind creating this 3D scroll-depth effect with clickable elements?

Links to any code examples/documentation would be great!


Related: In Review - 3D Timeline

The linked post also refers to the respective github repository. By studying the code, you should be able to figure out by yourself how the timeline works.

1 Like

If you were to build a traditionally scrollable Group of objects in three you would manipulate the Group’s Y position based on the mousewheel event to make it go up and down. Change that to the Z axis instead and it’ll make the group move forwards and backwards on scroll. I then just changed the objects inside the group to be spaced apart based on the Z axis instead of the Y axis.

As for elements being clickable, that’s just using typical raycasting: https://threejs.org/docs/#api/en/core/Raycaster


Great, thank you both!