DEV Community

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

Posted on

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.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay