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:
The magic here is just a copy-paste of Three.js sample code from an official “Creating a scene” tutorial script without any modifications into a componentDidMount() method of the App Component.
It looks great but if we check the page markup it becomes obvious that the canvas is actually mounted at the document body and not inside of React. That happens because of the document.body.appendChild( renderer.domElement ) line in the example code. Let’s fix that.
Step 3: Add a ref to tell where Three.js should mount the scene
We simply attach the Three.js renderer to the React Element utilizing a ref. If we check the page markup, we’ll see that Three.js canvas is inside of the React App so everything is fine now.
Here is a link to the final result
Code: https://codesandbox.io/s/81qjyxonm8
Live demo: https://81qjyxonm8.codesandbox.io/
Congratulations! We have successfully completed a basic Three.js integration that works with the latest React and allows to experiment with any plain Three.js example in 3 easy steps. I hope you enjoyed the post, stay tuned!
In the next article, we’ll learn a few convenient tricks to make our simple Three.js app more usable inside of React:
- how to integrate the latest React with latest Three.js camera controls without extra npm packages installed
- how to easily resize the Three.js scene inside React
- how to stop the show and unmount Three.js scene properly
The author of this tutorial is Alexander Solovyev, a web developer at Soshace.com, a web-dev hiring platform. A gif provided by Igor Lemeshevski.
