I’ve designed a dynamic 3D website for a project that I’m working it.
The main design element that’s considered in making this is the mouse scroll and using it’s position to dynamically display content in real-time.
It’s built using ThreeJS for for the 3D aspects while the other elements that are layered on top and below of the 3D canvas use HTML and CSS to provide a fluid design.
You can check out the site here: slate.madebyayan.com
Impressive, love it, great job, I would love to learn to code webpages like this.
Best regards
Thanks for the kind words!
For me, what helped the most was the threeJS docs when making this. They’re so easy to understand and it makes development a whole lot simpler.
I’m sure you’ll be able to make webpages like this and even better than this from just learning through the docs!
I agree. The docs are unusually good.
With a little effort I could be an expert in a week! 
Really nice design, great work!
Couple of minor issues:
it scrolls waaaay too fast - I have to be very careful to scroll one step at a time or I don’t see anything of the cool “Elevate your screen” section. Once I get down to the info modals (Definitive way to multitask etc.) scrolling works normally again
second time I loaded the site it got stuck on “waiting for cdn.skypack.dev” for about 30s. However, all the text content loaded but the scrolling didn’t work very well (text elements were overlaid on top of each other)
@madebyAyan FYI, this may be because some Windows mouse wheel events take place once per “line”, while Mac touch-pads calls an event per “pixel”.
This can be controlled by looking at the WheelEvent.deltaMode property and scroll accordingly. Devices that scroll by DOM_DELTA_LINE are more sensitive and DOM_DELTA_PAGE are super sensitive to scroll events, compared to DOM_DELTA_PIXEL devices.
I just checked using window.addEventListener("wheel", console.log) - deltaMode value is 0, so I guess that means DOM_DELTA_PIXEL?
I’m on Windows, checked in FF and Edge.
Thanks! Glad you like it.
I’ve gotten feedback that on different devices the scroll speeds seems to vary a lot. Someone tested it on Mac as well and it seems like the scroll works the worst on Safari, so I’m still trying to find ways to make the scroll work better across all devices.
But until I find a solution to that, I’ve reduced the scroll speed throughout the entire site so it hopefully works slightly better now.
And that’s strange, I never got stuck on the cdn while testing, not sure what might be causing that, but that CDN is just being used to fetch ThreeJS, I’ll try to look into that as well or maybe change the cdn provider.
I did not know about the “line” vs “pixel” scrolling that those two OS use, and I think that might be the cause for the scrolling being so different across devices.
Though, someone did test it out on a Mac, on both Chrome and Safari, and it seems like the scrolling varied a lot between the two browsers! Chrome worked fine on Mac, whereas Safari had some issues and jitter while scrolling through the site.
So not only do different devices have different scroll behavior, but the different browsers on that same device scroll very differently!
Maybe you could use a library like scroll magic? I haven’t used it myself but presumably they’ve considered all the cross-browser stuff.
As for small CDNs, personally I wouldn’t use them for production these days, it just adds another point of failure. There’s no cache benefit anymore as each site has it’s own cache now.
I would just put the entire site behind Cloudflare, then you can bundle/treeshake three.js to reduce the amount of JS.
I’ve been looking into Laxxx.js and checked out scroll magic as well, and since they’re specifically made for one thing, they might help with the scrolling. But it looks like if I do use them, then I’ll have to rewrite my entire animations and timings functions to fit with the library. And that would take a lot of time, especially going through each element and re-timing them! So I’ll try doing that at a later stage when I have more time to refactor the site.
And you’re right about the cache, cloudfare is a better option nowadays for faster load times when it comes to site caching. So I’ll definitely have a look into it.