DEV Community

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

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

James Hubert
Customer experience-centric product lover and front-end developer in New York. Follow my dev Twitter: www.twitter.com/jwhubert91
・2 min read

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.

Discussion (0)