Build fancy landing pages with React(-three-fiber) and Threejs 

This is a paid concise course/tutorial on how to “Build fancy landing pages with React (react-three-fiber) and ThreeJS by 0xca0a. It‘s my first time dabbling with both ThreeJS and react-three-fiber.

Last updated on 26th Feb 2023
Gumroad course
Documented on 22nd Feb 2023

First 15 minute of the course

In my opinion, it is definitely helpful to have prior programming knowledge before starting the mini course. My JavaScript, TypeScript and React knowledge is very limited but know my way enough to develop this website you‘re reading this from.

Even then I think I only managed to absorb like 40% of what‘s happening. However, this is why I like this type of course(s), because the result of what you are doing is almost instantaneous. That way I know if I am doing anything wrong (or right for that matter).

I can imagine revisiting this again in the future to fully grasp what‘s happening.

Min-chapters that I got through so far:

  • Setting up a `dev env`
  • Getting comfy with ThreeJS in React
  • Animation basics
  • Building the foundation

The next 7 minutes is brutal 🥲

Okay so now I am doing these mini-chapters and it is brutal awakening for me 🥲

  • Finding free models
  • Preparing models for the web
  • *Note to self: Grant Abbitt Blender Basics

First, this is my first time dealing with Blender so I am stumbling around a lot; I was playing the video at 0.75x speed but yet still going back and forth countless time.

Second, the moment I am doing some “cleanup” with Mesh > Clean Up > Merge by Distance my maxed out 2022 Macbook Air M2 crashes every time 😭

Third Time‘s the Charm 🤷🏻‍♂️

I wasn‘t going to give up and gave it one last try... and it worked! I managed up to the part of compressing the already downsized banana.glb file with site.

Mini-chapters gone through:

  • Displaying models in the browser
  • Making models declarative with `gltfjsx`
  • Putting the pieces together
  • Wrapping up with `Effects`

Personal conclusion

So it took me 2 sessions and around few hours to complete this 40 minutes tutorial. To be honest, most of the stuffs are way above my head but I am glad that I managed to replicate the output. I also made sure I typed each line of code to roughly understand what‘s going at surface level at the very least.

I have to revisit this tutorial one day and hopefully by then, I am more fluent with some of these stuffs and all the concepts are within my grasp.

It was beyond my level but it was fun and very educational. Dealing with 3D outputs and design seems tricky and difficult but the result is also satisfying.

Now I look forward to more of these types of learnings!

Share your learnings

I'd love to hear more and learn from your perspective. Are any of these notes factually wrong or outdated? What else should I be exploring in the future? Let me know more below.

Older learning

Not Started

Three.js Journey

Three.js Journey is a course by Bruno Simon.

Copyright © 2009 – 2023 Ajmal Afif

LinkedIn icon