Three.js Beginners Tutorial – Updated for 2017

Three.js is a javascript library built on top of WebGL to create and display 3D graphics in the browser. It does a great job of simplifying WebGL concepts and allowing for better cross-browser compatibility. In this three.js beginners tutorial we’ll be covering jsut enough so you can get up and running in a few minutes.

The core concepts of a successful three.js scene will incorporate a scene, camera, and renderer, and of course the geometry that actually makes up what the user sees. There is a lot to three.js, but the scope of this tutorial will focus on the bare minimum to get up and running.

Getting Started

In order to begin creating our scene, we need a basic HTML page to display it. Start with something like I have below.

 

Now that we have our HTML file ready, we can start getting into some three.js!

Creating the scene

As mentioned above, a successful scene requires 4 components. The code below will setup the scene with appropriate options to see something in the browser.

 

This may be a lot to take in at first glance, so allow me to break it down.

  1. Set the dimensions of the scene
  2. Set the FOV (field of view). This is the angle of the observable world at any given moment. Anything between 45 and 75 here is pretty standard, depending on what you’re going for.
  3. the aspect ratio defines the difference between the horizontal field of view and the vertical field of view. This is more than likely always going to be width / height.
  4. Near and far values define define the distance from the camera. The min value is usually pretty small, such as 0.1. And far is usually a larger number to ensure what we want to see if in the scene. 2000 is pretty standard.
  5. WebGLRenderer: The renderer is used to display your scene.
  6. Scene: Think of this as the container for everything. All objects are added here to be displayed in the browser.
  7. OrthographicCamera: The camera is how we see everything in the scene, there are multiple camera types and I recommend experienting with all of them.
  8. requestAnimationFrame: This will notify the browser that we want to perform an animation and requires a callback function to continue animating.
  9. Calling renderer.render() in our animation loop will continue to display our scene on each animation call.

Adding Our First Mesh

If you open the example so far in your browser, you’ll see a blank canvas. This means everything is working as expected. Now let’s add our first 3D mesh!

 

So what’s changed here?

  1. We created the geometry of our cube using the BoxGeometry constructor.
  2. We created the material to be used on our cube using MeshBasicMaterial.
  3. By creating a new mesh an passing in the geometry and material, we now have a cube!
  4. Add it to the scene and its we officially have our first mesh.
  5. Also a very important change here is that we added a value of 5 to our camera’s z position. This will move the camera back 5 units. Since we did not modify the position of our cube, it will sit exactly where the camera is, meaning we can’t see it until we move either the camera or the cube.
  6. For a cool effect, we are rotating the cube’s x and y values in the animate function.

Conclusion

I’m going to cap off this brief tutorial here. We’ve covered the core concepts of three.js and how ot successfully create you first scene. We’ll be diving deep into three.js in further blogs to continue exploring this amazing library. I hope this served as a good three.js primer, and we’ll see you in future tutorials!

 

See the Pen XaXyvp by Tristan Gemus (@tristangemus) on CodePen.

Leave a Reply