Threejs Concepts

What Is It?

Threejs is a JavaScript library that enables you to create 3D objects through JavaScript and render them in your browser. Threejs can be broken into three important pieces which allows the browser to process its code.

What I will be discussing

I created this guide to explain the general concept of how Threejs works for new users. I started with a rough understanding of how to put everything together although I didn’t actually understand how it all worked together. I hope these concepts will help you to get a better understanding of the tools Threejs gives us.

Our Scene

Creating our objects

For our scene we create our objects which Threejs processes and adds to it. An object has three ways to be created, it can be created through a mathematical process such as creating a sphere and getting it’s sides properly created. We then have the point system in which vertices are created through x,y and z creating very precise and complicated models. The final method is loading a model, this is done by creating a model in any third-party 3D program such as Blender, which is most commonly used for it’s easy export system.

Applying mesh

After creating your object you must apply a mesh to it. A mesh is simply a texture for viewing the actual object. Although as mentioned previously if your object is created through a mathematical process or vertices they can be given a wire frame which allows us to view the connection points without applying a mesh. As for a model loaded through Blender you must bring in it’s textures and model information for Threejs loader.load() function to create it. For more information I will include a link to documentation which goes further in depth on how the loader.load()functions.

https://threejs.org/docs/index.html?q=load#manual/en/introduction/Loading-3D-models

Modifying created objects

Before we get to adding actual objects I will quickly go over some ways you may add or modify properties to objects you’ve created. This is done through methods such as

Object.castShadow = Enable the object to cast a shadow
Object.receiveShadow = Enable the object to receive shadow casts
Object.rotation.x or .y = Change the objects X or Y axis
Object.position.x or .y or .z = Change the objects x,y or z position in the scene

Enabling shadows for our scene

To enable shadows we add to the scenes properties

this.threejs.shadowMap.enabled = true

this.threejs.shadowMap.type = THREE.PCFSoftShadowMap

For reference this.threejs = new THREE.WebGLRenderer , we go more in depth on renderer later.

By applying these two properties to our scene, we enable the scene to create shadows and specify the type of shadow we want it to calculate.

A quick mention shadowMap.type has four types, each one has mathematical equations which calculate the shadows sharpness, this of course depends on the one you decide to use (BasicShadowMap, PCFShadowMap (default), PCFSoftShadowMap and VSMShadowMap).

Adding lights to our scene

Lights are a complicated subject in the same form shadows are created. Although Threejs makes this a very simple process to understand and learn, it has a larger learning curve in creating ideal lighting scenes. I recommend if your willing to learn about lighting to use documentation from NVIDIA as they have lots of studies on the subject. For our purposes we will be using simple ideology to create nice lights for our scene.

AmbientLight: This light is used to apply a light source to all objects within a scene. The most simplified way to think of this is a light that gives objects a static light without being too overwhelming, yet enough to illuminate an actual object.

DirectionalLight: This light as the name implies creates a directional light although it isn’t exactly an intense light. It’s commonly used to create a sort of sunlight effect where it casts from a far away position and creates shadows at an angle.

HemisphereLight: This light is used to create as a the name implies a hemisphere effect. It’s commonly placed well above the scene to reflect light emitting from the sky. Not to be confused with the DirectionalLight.

PointLight: This light creates a point in which light emits around it. Most commonly used to create torch effects as the light emits the color it’s given in all directions around it.

RectAreaLight: This light as the name implies creates a light in a rectangle. Most commonly used on windows in games where the glass is opaque yet we would still want light to shine through in a rectangular direction.

SpotLight: This light as the name heavily implies quite literally casts a ray of light in a cone that increases in size the further it travel although decreases in intensity as distance increases. Most commonly used for a spot light and flash lights.

Adding to our scene

Now that we’ve gone over how to create objects we must add to our actual scene by using scene.add(). This may be used through for loops as well to generate a number of randomly positioned objects in a scene. You may also group objects together for them to all be modified simultaneously. This is very powerful when creating layers of objects and attempting to only access a specific group of objects.

Our Renderer

The magic

Great! We’ve added our objects to the scene now how do we actually view our objects. This magic is done through Threejs which creates our objects and passes them to the browser. They’re loaded through our selected renderer most commonly known and used is the WebGLRenderer.

THE CAMERA!!! 😱

I apologize in advance as I had to make the joke since I completely forgot to add it when I initially wrote this. We will notice that without our camera we have made it nowhere all throughout our progress. The camera works in a simple formula when you view it.

Camera diagram

Now to understand how the camera does what it does we must view the diagram above. We start from the far clip plane which is essentially how far back the scene will work in unison with our renderer to display what we can consider the end point. Then we have the actual scene this is where we have the spheres and tiles, you can imagine this as where our objects actually are in the scene it is our “3D space”. Lastly we have the near clip plane, this is a compilation of both the far clip plane and scene that our camera sees.

Animation

The renderer displays our scene to the camera and loads it in a constant motion creating the effect of what we know as animation. The general rule of thumb is to stick to 60 frames a second. Using this knowledge we know that our scene is constantly running and changing it’s “state” 60 times a second. This is usually a good time to add to an objects rotation or movement, what I learned is to stick to small amounts of incrementing values on an object. As for models loaded through Blender they usually have animation loops which Threejs is capable of using.

Conclusion

I hope I was able to assist and share my knowledge well enough for you to grasp how many things in Threejs can work simultaneously together. There are many cool methods of creating and animating objects. As an example I created a simple object scene that initially generated 256 spheres. When hovered over they would change colors. When selected, we set its state to be spun and give the ability to move or be placed back in a random position within a set boundary. Thanks for reading my medium and have fun creating Threejs scenes!