You are browsing as a guest. Sign up (or log in) to start making projects!

F1 RB20 Scroll Concept

  • 4 Devlogs
  • 7 Total hours

A scroll-driven 3D experience built with vanilla HTML, CSS, and JavaScript — featuring an interactive Three.js model of the Red Bull RB20, choreographed to move, rotate, and reveal season stats as you scroll.

Ship #1

Made a Scroll concept website with a F1 car that I could learn JS from as i know html and css to some level. I did use AI to help me with debugging and explaining hard concepts like GLTFLoader and scroll trigger animations. The website is a very basic scroll animation website with a RB20 3d model by Dave Love on sketchfab that i choreographed to get to positions that i wanted it to go to and some basic details about the RB20 championship car.

Try project → See source code →
Open comments for this post

1h 2m 58s logged

Devlog #4
Aaaaannnnddd, thats itt for my first javascript project. Today was basically just aligning the car, adding text blocks here n there and a table at the end. I did run into some problems of a very dumb mistake of not adding the stats part of css into my class in html. It was a very easy fix so nothing much about it. I added the CC Attribution and stuff at the end of the website as i had downloaded it from sketchfab and the real creator of the 3d model deserves it for his time and hardwork.
Thats all i guess, now its time to ship.
Thanks to anyone who has been following my small journey and i hope to make a better website with better scroll animations for my own design brand called Nokovi.

0
0
29
Open comments for this post

1h 42m 39s logged

Devlog #3
Today, I changed the static rotation in place and designed and choreographed an actual proper scroll animation for the website so it doesnt just look like the car is rotating in one place and made it actually fun to scroll through. I had to play with the 3 axises and camera angles and took some time to figure out what is what and finally when i got the grasp of it, it was so much easier and felt so easy to just place things wherever i want to and not. I did use AI a lot today tbh but i can positively say i learned much more today than other days. I sent the car flying like a ninja star quite a few times and it was honestly funny to see how it looked. Ive put the recording down below so watch it if u wanna see the “bloopers” of my small project.
Debugging was also a problem today as the sizes and stuff that AI recommended i put them in the wrong places and thankfully i figured it out later as i learned. And at last i genuinely had no way to understand how the responsive thing worked so i watched few videos and asked doubts to ai and then finally found the answer to make my website responsive(it was just 4 lines bro). yea thats all for devlog 3 and now imma go work on the actual history and details of the rb20.
Thank youu

2
0
68
Open comments for this post

1h 10m 48s logged

Devlog#2
Ok so, today i figured that primitives wasnt gonna work out as it took forever to understand and im pretty bad at it. So i switched to the next best thing my tiny head suggested, a 3d model(best dicision i made). I learned about the world of sketchfab and how many extremely talented people exist in this world.i had to work with CC attribution vs NonCommercial(i didnt quite know them before)and figure out which was usable for my project. I first tried a lightweight model with separate wheel meshes (good for the explode effect), but pivoted to the detailed RB20 (365k triangles) for visual quality which was quite the tradeoff. I havent actually changed much text or anything and thats for tomorrow with better angles and more history about the car. I downloaded the wrong formats and then finally got to .glb ,26MB,1k texture.
Then came the real debugging round 2(yes, again). Every time, I got a cleann 404 on the model path even though the file was litrelly sitting right there in the folder. Turns out the liveserver doesnt just notice the new files or folders sometimes. I had to fully stop and restart it and had it double checked with curl in terminal just to be sure if the server actually had the file before touching the browser again, and it did.
Then the model “loaded” with zero errors, console looked totally clean, but absolutely nothing showed up on screen.Then came back n forth with AI and finally realized I’d deleted my entire render loop when I swapped out the old primitive car code for the model-loading code. WOW. And then with the help of AI i added requestAnimationFrame + renderer.render back and the car finally appeared.
Finally , the car came and everything looked alright but the cars color was a bit off so i did a little tweaking here and there and then changed the bg asw . Thats it for my day 2 and devlog 2.
(Let me know which bg color is better)!!

0
0
25
Open comments for this post

2h 44m 35s logged

Dev Log#1
Ive always wanted to learn js and what better way to learn it by making a project. I love F1 and hope to work as a race engineer one day. So i combined the both and thought of a plan to make a smooth scroll animation website using html,css and js. Yea, AI was used to explain a lot of stuff and otherwise I’ll be honest id just be copy pasting whats on youtube and other websites. i learned a lot in just one day of “trying” to make a decent scroll animation. I started my project by watching a yt vid and then later realised this was nowhere near my level of expertise and got a taste of the real deal but I still followed through it and when it felt like just copying what hes doing, i added my own twist and deviated from the original yt vid and turned to the exploding F1 car concept. As for the name DRIVEN, it is a bigger project of mine which i have been working on for a while and i hope to share it with you all soon.
The Build: it started with just scrolling through four coloured blocks and got to much better level. Building the car out of Three.js primitives was an actual hell for me. and took most of my day watching tutorials and chats with friends and ai. Then came the debugging part. OH MY DAYS. I swear now i hate people who use ai for every part of their code more. Yea using a little i can see the point. Locomotive scroll and gsap scrolltrigger was a real issue. the scroll bar was visible but it wouldnt scroll down and no tutorials that i watched helped me out. The fix was to rip out Locomotive Scroll and just going native scroll. yea now my brain hurts so thats all for my first ever dev log. I hope to polish this website more tomorrow and hopefully i get a better looking F1 car than this cubes and cones.

0
0
5

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…