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!
Thanks,
Gareth
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
2 Likes
Great, thank you both!