Introduction to three.js

One of my classmates mentioned a javascript library called three.js and described how you could make 3d models with it. I was intrigued, so I decided to test it out!

Three.js allows the creation of GPU accelerated 3D animations using the JavaScript language. It uses WebGL, which is a low level system that only draws points, lines, and triangles. To do anything useful with WebGL, it generally requires extra code which is where three.js comes in handy. Three.js can use WebGL to render your scenes on all modern browsers. Three.js is published as an npm module so all you need to include it in your project is to run ‘npm install three’.

First we must create our html file. Let’s name this one test3js.html Then let’s open it in our browser. The page will be blank of course, so let’s add some code.

We now have our blank html template with our added script to the three.js library, and we can start building! Next is setting up the scene, camera, and renderer. There is more than one camera in three.js but for our purposes we are using the PerspectiveCamera.

The PerspectiveCamera’s first attribute is the field of view. It takes a value in degrees that is the extent of the scene on your display. Second is the aspect ratio. It is best practice to use the width of the element divided by the height, or you end up with a squished image. The next two attributes are the near and far clipping plane. This means any objects that are further away from the camera than the value of “far,” or any objects that are closer to the camera than the value of “near” won’t be rendered.

The last thing is the renderer. Again there is more than one renderer but we are using the WebGLRenderer. We need to set the size at which we want to render our app. So we set it equal to the window width and height. And lastly we add the renderer element to our HTML document. Next let’s create our shape!

To create any shapes we need a geometry and in our case to make a circle we need a CircleGeometry . This object contains the radius, the circle and the number of triangle segments that make up the circle. We need to be able to color our geometry, so we use MeshBasicMaterial. Materials take an object of properties which will be applied to them. We are keeping it simple and just adding a solid color. The third thing we need is a Mesh. It is an object that takes a geometry and applies a material to it. Next we add our cube to the scene and position the camera outside of our shape.

We still haven’t rendered our circle, so the next step is to render with an animate loop.

Our animate function creates a loop that causes the renderer to draw the scene every time the screen is refreshed. The rotation method on the circle is what causes it to rotate. This will be run every frame (normally 60 times per second).

Now you should have a basic circle spinning on your screen! This is the bare bones of what three.js is able to do and I am intrigued to see what kind of VR apps you can build with this library. I am going to dive deeper into this rabbit hole and I will keep you all updated with what I find.