DEV Community

Cover image for Project 76 of 100 - Intro to @react-three/fiber (Three.js for React)
James Hubert
James Hubert

Posted on

2

Project 76 of 100 - Intro to @react-three/fiber (Three.js for React)

Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

Today was another shorter project where I followed up on yesterday's post by building a small world using Three.js in React with the @react-three/fiber npm package. It just goes to show you how fast the Javascript world moves that a well-known npm package will get swept up into some other package every couple of months, introducing breaking changes. I guess this is a tradeoff of modularity.

For this project I followed Daniel Bark's awesome tutorial called "Building a 3D world in React with Three JS" up to about the 10 minute mark when he introduces physics. The reason I stopped is that there were breaking changes in the npm cannon library since he made the video as well.

It was interesting doing this little tutorial the day after doing a short tutorial on Three JS in vanilla Javascript because you really get a sense for how easy JSX makes your life.

Rather than creating copies of objects with the new keyword and adding them to the scene with an add function, we simply create a JSX function and include them as components within the canvas.

If you like projects like this and want to stay up to date with more, check out my Twitter @jwhubert91, I follow back! See you tomorrow for another project.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post →

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay