Using Three.js to make a 3D Scene in React.js

Image for post
Image for post
Photo by Amarnath Tade on Unsplash

Three.js is a Javascript framework for displaying 3D content on the web. You can create some really cool 3D projects and animations simply using Javascript. No high-end PC and software required! I discovered this library and have been playing around with it quite a bit, in addition to drei and react-three-fiber. Having an extensive 3D and motion graphics background, I was naturally very interested in learning how I could incorporate this into my software engineering projects and skillset.

In this post, we’ll walk through installing, importing, and setting up a simple scene using Three.js. I’ll be pulling heavily (and linking to) Three.js’ documentation for this.

Installing Three.js

Since we’ll be setting up Three.js in a React project, let’s first create a new React app:

Importing Three.js

First, we will install Three.js and add it to our package.json:

Now, let’s open up App.js. We’ll clean out the placeholder code, and import the entire Three.js library:

Setting up basic scene

This is going to be a lot to add, but we’ll walk through each line to give some context, and we can play around with variables and see how they change our scene in real time. We are going to add all of our 3D scene code into App.js componentDidMount. This is a modification of Three’s guide on creating a scene, modified to work in App.js in our React app, and with some extra/modified elements, like a light:

Now, trying running npm start if you haven’t already, and watch the magical cube spin in the browser!

Image for post
Image for post

Very cool! Let’s take a step back and comb through all of the code we just added.

First, we created the three main elements needed for a 3D scene, the Scene, the Camera, and the Renderer. Then, we set the Renderer’s size to fit our browser window’s size, followed by mounting our Renderer to the DOM.

Cool, so that sets up our camera and renderer. The next several lines are setting up our scene. We create a new Geometry object (a BoxGeometry, specifically, which has a size of 1x1x1, represented as (1,1,1)). This is (x,y,z), referring to the x-, y-, and z-axis in our 3D space. Change these numbers to see how it changes our shape on the screen! After the geometry is created, we created a material to put on our object, which is this case was a Standard Material Mesh with a color of ‘0x7e31eb’, which is purple, the color of royalty. After setting up the geometry and material, we create a cube (Mesh), passing the geometry and material variables in. Finally, we use scene.add(cube) to add that cube into our scene.

The last thing we created and added is a light, and in this case, we created and added a Hemisphere light to our scene.

Now, we set the camera’s z-axis position to 2, so we’re pulled back away from our cube.

Finally, we set up our animation and tell our renderer to render the scene, using the camera we created. Note that our cube will be rotating in each axis at a rate of 0.01. Feel free to change these values to see what changes.

That’s it! Hopefully, you played around with the attributes and came up with your own cool looping spinning shape! If you want to learn more, dig around in Three.js documentation yourself, and use different textures, meshes, shapes, lights, and cameras. Heck, you could even import custom 3D models!

Have fun!

Written by

Software Engineer and Brazilian Jiu-Jitsu brown belt

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store