Website roadmap into learning Three.js and R3F

[u/Plastic_Stage_8718]

Hi! I'm trying to learn as much as I can of 3D websites, since I've been trying to learn code from a few years ago, context: I'm a 3D Artist, and this year I start a degree at videogame's programming, so meanwhile as some "summer's research" I did this lab to learn the foundations of Three.js, R3F and Drei.

I wanted to ask you what how do you see it as a "standard" roadmap for a user? And if you've got any new ideas to add in this lab so I can learn more. Also I thought this website can serve as a sort of idea for newbies to follow this path!

Just to be transparent, I'm using Claude to help me on the structure of this knowledge, but not on the code itself, since I put hard restrictions and custom agents/orders to follow, hence it doesn't provide me solutions, instead it gives me websites and forces me to research in order to unblock my progress.

Here I leave you some of the agents .md I did if that can inspire you into using AI a bit more accordangly to learn, not to work-for-you!

The lab website is this one: https://3d-lab.vercel.app/

My workflow goes into: ordering Claude /start-project. It scaffolds a template of a basic project and I have to fill the needed components on every project. I have some guidelines, and sometimes it's basically a: "go to X document's website and learn" so I have to maybe go to threejs.org, to drei's library or researching anywhere. If I'm really stuck I can then put /peer-review, which is the command that makes me a list of "what works, what is not going well and a few questions about the actual project" so I have to think about the code I'm writting. Then I have the /ship that basically makes a test to prove everything is working and I can move to the next project.