Starting with React 16 and Three.js in 5 minutes

What if we want to touch the world of 3D and leverage the power of WebGL with Three.js?

Probably we want to use it together with React. The common pattern of starting anything with React is to type “react + anything” into a Google to find some wrappers. But that’s not the case with Three.js. Let’s find out why.

Author: Alexander Solovyev, a web developer at Soshace.com

React wrappers for Three.js have 2 issues:

They could easily become stale at some moment of time: for example, 2 most popular React wrappers by date (react-three and react-three-renderer) are outdated and only work with React 15

They don’t use plain Three.js code: you should translate it into declarative React components that might sound like a good idea in general but not for our case because you can’t just copy-paste the code from StackOverflow or Three.js examples that match your use case.

So, let’s try to avoid above-mentioned downsides and start the React integration with pure Three.js without any additional npm packages. I will try to use as little code as possible to keep things short and simple.

Stage 1: Import Three.js into the app

We have just imported the Three.js npm package that is named “three” but have nothing to show except for a blank page. Stand by.

Step 2: Copy-paste pure Three.js code into componentDidMount method

Voila! At this stage we already have a green cube on the screen: