Back to all blogposts

Rendering 3D in React made easy with react-three-fiber

Łukasz Tyszkiewicz

Łukasz Tyszkiewicz

Frontend Developer

What if I told you… that you too can learn to code in 3D objects in React that can wow customers? Learn the basics of the react-three-fiber renderer, and soon enough, you could be able to turn a static page into an art gallery, an interactive map, or any other metaverse thing.

This react-three-fiber tutorial teaches you

How to create 3 spinning cuboids that change colors and size on click with an added speed adjuster.

Reasons for using a React renderer 

3D graphics now create enriched experiences for applications users that allow businesses to reach new waves of customers through memorable visuals. They can represent nearly lifelike products like sneakers or backpacks that can be customized.

Advanced renders can take you on a virtual corporate office tour or even let you complete driving exercises in VR. The gallery I mentioned before gave me an out-of-body experience for 10 minutes.

 

Experience the dreaminess of a react 3D space. Source: Ripple

From the react-three-fiber projects I’ve seen online, I noticed they aim to make a product/service memorable or understood better. But you can also embrace your frontend skill to simply create an experimental portfolio page as a work of art.

💡 Other examples of 3D frontends to get you hyped

Robin Noguier’s portfolio

Dubai Expo 2020 interactive map

GEMINI car presentation in motion

Is it hard to do? Making a scene with Three.js

Normally, you’d be using WebGL — the browser’s API for rendering 3D — which is pretty hard. The list of definitions needed for a regular cube is crazy. See this WebGL example from Mozilla.

Rendering is easier with a high-level library called Three.js, which allows you to create a 3D environment using a simpler API. Input just a few lines of code and you can create a React project with a plain scene hosting the cube.

To see anything, you need to declare your cube. Pretty simple.

Still nothing? Okay, there is one more step.

While that was pretty clear, the rest of the code has this annoying 2000-2010 style.

Now, import react-three-fiber

Mixing modern React applications with jQuery-like code is not the best idea to improve code quality. But react-three-fiber (R3F) is our savior here. The renderer is declarative like React, letting you create a self-contained component of a 3D scene without mind-clouding complexity.

Add R3F and Three.js as dependencies to your existing Create React App. Alternatively, use the TSH React starter with the usage of yarn add three @react-three/fiber or npm install three @react-three/fiber –save.

Create a functional component that returns the scene setup with light.

Your scene is almost ready. Now, add the cube, so that we move forward and explore the exciting options that R3F offers.

You’re using a mesh React component that is a wrapper for different  Three.js geometries. One of them is boxGeometry which represents the cuboid (or as it says — a box). Add one of the possible Three.js materials simulating depth to see your wonderful baby.

What does the declarative way of creating 3D in React give you? The direct access to all of React’s bells and whistles! You can build custom, self-contained components, use the reactive state, and do everything that React already has in a simple and efficient way.

👩🏽‍💻🧑🏻‍💻 Heard of CTO Roundtables?

Learn the practical truth of how development teams work from real leaders. Access 12 webinars discussing cloud ops, developer experience, and tech strategy.

How to create a scene with several cuboids

A client walks out of your closet, asking for a simple app with spinning and clickable 3D boxes. The user should be able to control the rotation speed. You need a proof of concept done for lunch (which you pay for). How would you approach the project?

Make usage of the custom Box function component to specify size, color, and speedFactor. The code below assigns a default value to some extra props that can be changed later — no worries.

Use the regular useState statements to track the hovered and active state. Add boxRef to store a reference of your mesh, as it lets you manipulate the object through useFrame callback. Please analyze the code below at your pace until you understand it.

So your scene now uses the awesomely customizable Box component. In order to give the user rotation speed control, add range input to your JSX structure and the useState, which will contain the velocity information.

A small batch of code can hold a lot of wonder! Once you master react-three-fiber, you’ll be ready to play with Three.js and its rich features. And the result?

💡 Most-read React tutorials for your viewing pleasure

React-three-fiber offers awesome developer experience in one pill

The renderer has its own developer experience that goes beyond the declarative style. R3F has outstanding Typescript support that reviews your types at all times.

Performance optimization in R3F is a real game-changer, as the render loop of a three.js scene is completely separated from React’s Virtual DOM.

Besides that, react-three-fiber also has a great ecosystem of utility libraries. There is @react-three/cannon for creating physics-based content or @react-three/drei. The latter offers tons of React three-fiber functions that can save hours on creating a spectacular 3D scene enriched with stunning post-processing effects.

Remember that to produce real results with react-three-fiber, you really should know Three.js by heart.

Instead of rushing to finish react-three-fiber documentation, study the Three.js docs. That will give you that extra confidence while coding. Do that and in the end, you won’t feel like this:

react three fiber

But more like this 😄

react three fiber

 

Reading material

What are the limitations of react-three-fiber?

There are no limitations when you compare it with three.js. You can create the very same things in react-three-fiber as in three.js by using its camera, mesh, geometries, and materials. Simply put, you can use anything that threejs exports.

Are there any performance issues in react-three-fiber?

No, because the react-three-fiber canvas has its own render loop, which is separated from react-dom. Its renderer is composed into the react’s ecosystem. Theoretically, you might be able to write more performant, low-level code, but react solves numerous functionalities which might be hard to achieve in plain JavaScript.

Is it possible to use react-three-fiber in react native?

Yes, it is possible to use react-three-fiber in react native. react-three-fiber uses expo modules under the hood for WebGL bindings to ensure interplay between metro and three.js. For details, check the documentation here.

You may also like

What would you like to do?

    This site is protected by reCAPTCHA and the Google
    Privacy Policy and Terms of Service apply.

    We regard the TSH team as co-founders in our business. The entire team from The Software House has invested an incredible amount of time to truly understand our business, our users and their needs.

    Eyass Shakrah

    Co-Founder of Pet Media Group

    Thanks

    Thank you for your inquiry!

    We'll be back to you shortly to discuss your needs in more detail.