Setting up Three.js in React App (basic tutorial)

Whether you have your app up and running or you are starting from scratch this short tutorial should help you get started with using Three.js in your react application.

Magda Odrowąż-Żelezik

Published in

Fink IT

4 min readJul 8, 2021

Create React App

I like to start my React projects with create-react-app kick off:

npx create-react-app .

Removed everything except necessary files.

Let’s clean it up first. I like to remove everything I’m not starting with and yes, that also includes testing and css files. I know I might need them in the future but I would create my own structure then when I need it. I like not to leave anything in the project just in case. It’s pretty much like hoarding and only leaves a mess. So the cleaned up structure should look something like this.

Remember to clean up index.js and App.js files from missing imports as well. Actually, we would like to empty App.js at all and start with a clean file.

Get Three.js

Getting started is actually fairly simple. Import three module to your project

yard add three

Then in the App.js start with the following template:

import React from ‘react’;
import * as THREE from ‘three’;
const App = () => {
return (
<></>
);
}

export default App; — getting started in App.js

In the snapshot we import React, three from freshly installed module and we create a simple component that returns nothing but a React.Fragment object <></>. Let’s jump now to Three.js documentation and see getting started page.

three.js

Getting started page on threejs.org

The link contains a thorough, detailed description on how to create your first simple Three.js scene. In general Three.js documentation is extremely comprehensive and should be your first point of inquiry when in doubt while working with 3D scenes. Make sure to follow the description thoroughly and not just copy the code. Trust me, it will pay off in the future.

Once done with Three.js introduction, you may copy the code from the site to kick off your first project. Let’s paste the content to our App.js between lines 3 and 4 and try to build the app.

import React from ‘react’;
import * as THREE from ‘three’;
const App = () => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 }

And when you start the app green cube rotating you should see 💚

You can see it’s rotating because it’s changing the outline, but it does not look too 3D yet. Let’s add some lightning to it. Let’s first change material to Lambert, since Basic material does not respond to light:

const material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );

And then quickly add some hemisphere light to the scene:

Much better right? Now we can learn how to improve our setup.

Better library setup

I suppose at some point you might want to use some extensions to Three like FBX importer or orbit controls. Let’s actually do this now and see what happens. If you search for Orbit Controls in Three documentation you are greeted with the following:

To use this, as with all files in the /examples directory, you will have to include the file separately in your HTML

One thing is, we are not adding anything “to the HTML”, because we are working with React. Second of all, Orbit Controls are a part of three library, just not in default import. You need to import them separately.

I’ve learned by experience that I like to use resources throughout a project or in general store them in one place if possible. This makes the work more ordered. Let’s create a 3D folder when we will store all three-dependent (pun intended) objects and utilities. In the folder, create a file called three.js.

In the three.js file we will extend THREE object with required extension like so:

import * as THREE from ‘three’;

window.THREE = THREE;

require(‘three/examples/js/controls/OrbitControls’);

export default {
…THREE,
OrbitControls: window.THREE.OrbitControls
};

Now we just need to change the way we import Three in the App.js (or anywhere in the project) and be able to use Orbit Controls as well:

import React from ‘react’;
import THREE from ‘./3D/three’;
const App = () => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshLambertMaterial( { color: 0x00ff00

As you can see in the line 19 we are adding Orbit Controls from THREE object. In lines 20–21 some axis helpers were added as well to help us see what was going on. When you re-render app you should be able to use orbit controls now and rotate your cube of move in and out in the scene.

Whole code: https://github.com/magdazelena/clean-react-three-setup

Coming soon

More advanced tutorial on setting up multiple scenes environment is coming up soon, stay tuned.