Forem: Nate Argaw

The Power of 3D on the Web and Introduction to Three.js

Nate Argaw — Fri, 25 Aug 2023 09:59:17 +0000

This blog post follows the talk I gave at the Carolina Code Conference, 2023 in Greenville, SC.

Before I discovered the world of 3D web development, I wanted to do creative projects with code. But I didn’t know where to start, which path to take or which tool to use. Until one day I came across a portfolio website by Bruno Simon. In this website you explore the all the contents of the page by driving around a car. It runs great with smooth animations. It uses physics for collisions. You could also appreciate the developer's unique sense of style and personality. I thought it was effective, powerful and fun. I have been learn about it ever since.

The web is an awesome place and 3D gives it a new dimension. Why should you try 3D web development? You should try it for three reasons.

An effective form of communication.
It is powerful and easy to use
It is creative and fun.

It is said that a picture is worth a thousand words. Well, I’d say that a 3D interactive application is worth a thousand pictures. 2D gives you a lot of information but that information is static and does not change. But 3D is dynamic with data that changes based on the way you interact with it. A 3D interactive application allows you to convey much more information than you do with images or videos. This engaging and dynamic information allows you to communicate your complex ideas clearly and effectively.

This is all possible because of Three.js. Three.js is a 3D JavaScript Library that makes it incredibly easy to render 3D content on a webpage. It was originally created by Ricardo Cabello (Mr. Doob) in 2010. Today it has thousands of contributors and over a million weekly downloads on NPM. Three.js under the hood uses WebGL (also known as Web Graphics Library) to draw 3D content in the browser. WebGL is a web standard developed by the Khronos group and it gives developers direct control of the graphics pipeline. It supports Chrome, Firefox, Safari and others. WebGL runs in the canvas element.

Why not just use WebGL directly? Well it is possible but it is too difficult. WebGL itself uses the OpenGL Shading Language that is similar to the C programming language. It would be interesting to look into. But for most web developers a JavaScript library is preferable. That is what Three.js does. It allows developers to use a 3D JavaScript library to render 3D content on the web without having to understand shading language or the complex math it requires.

How does Three.js work? The easiest way to understand it is to imagine you are a movie director. You would need four basic things to make your movie. First is your stage - where your movie is going to be shot including the environment and lighting etc. Second is your Camera - you use this to capture the scene. Third is your screen - this is what will play your recorded scene. Fourth is your actor - this is what you show in your scene using your camera.

Go to codesandbox.io to follow along with this part. Select new sandbox and then Vanilla. Type 'three' under Dependencies. Then you are ready to add this code in the JavaScript file.

This code block shows a 'Hello Cube'. The scene will include everything that is going to be rendered similar to the stage of a movie director. The camera is a perspective camera. Then we add the renderer and this is the screen that shows our rendered content. We also have our actor which is the mesh. The mesh takes in a geometry and material. We adjust the position of the mesh and add it to our scene. Lastly, we have to animate it and we do that using a requestAnimationFrame function. We render the scene in every frame (approx. 60 frames per second) and we also rotate the mesh slightly in each frame.

This is where it gets creative and fun. These four aspects (scene, camera, renderer and mesh) can be modified to create anything from your imagination. For example you can manipulate the scene by adding different types of lighting, environment maps, shadows and fog. There are multiple types of cameras to choose from. The camera can be modified to move based on mouse scroll wheel value or can be used to create third person view chase camera similar to car racing games or first person shooter experiences. You can manipulate the renderer by adding a multitude of post processing effects such as a glitch effect, screen space reflections, screen space ambient occlusion, bloom and so much more. The mesh itself can be changed into any model designed using a 3D modeling software such as Blender3D. There are various loaders that can be used to import the models along with geometry, materials, textures and animations.

Getting started is very easy. One great place to start is the three.js documentation page at threejs.org. The threejs.org website features amazing examples of what is possible with 3D on the web. There you will also find examples with code. I should also mention the absolute best tutorial on Three.js by Bruno Simon called Three.js Journey. This tutorial is beginner friendly and goes into all the things you want to learn about Three.js.

Furthermore, I have created a meetup group in Greenville, SC called Greenville Three.js Meetup Group. It is for anyone interested in 3D web development to meet in-person to exchange ideas, learn from each other and network. Having 3D in your tool bag allows you to express your message in a new dimension. 3D on the web is effective, powerful and easy to use and most importantly, it is fun! I encourage you to try three.js and let your imagination run wild. Please feel free to reach out to me directly with any questions. Thank you for reading.

Nate Argaw

Three.js Hello Cube - A Beginner's Guide

Nate Argaw — Sun, 08 Aug 2021 03:33:25 +0000

Imagine you are Hollywood's best director and you are ready to shoot the greatest scene. You are standing in front of an empty set. What do you think you'll need?

A movie scene is very similar to a Three.js scene. We will create a Hello Cube and figure out the basics of Three.js.

While we can have an extensive list of things to add to our movie set, three things will be impossible to do without. The first is our movie star. Second, we will need a camera to capture our scene. Lastly, we will need a screen to view what we just captured.

Briefly, Three.js is a JavaScript library and Application Programming Interface (API) first released by Ricardo Cabello in April 2010. Since release, Three.js has grown to a robust library with thousands of contributors. Three.js uses WebGL to enable easy creation of 3D content. WebGL is a low-level cross-platform API that creates simple shapes such as points, lines and triangles. Because WebGL is low-level, we would need a lot of code to even draw a single triangle. Three.js makes this task much easier.

In Three.js, our object will be represented by a something called a Mesh. A "mesh" is a 3D form created using vertices. Each vertex is represented by a X, Y and Z dimension coordinate planes. X is the horizontal plane or the left to right plane. Y is the vertical plane or the top to bottom plane. Z is the depth plane or the front to back plane.

If we have three vertices, we can draw a straight line connecting one vertex to another to form a triangle. This is the simplest shape we can create in WebGL. If we wanted to create a flat rectangle we would need at least two triangles (at least 4 vertices). By adding multiple vertices we can create very complex shapes even the smoothest of spheres.

That's enough talk. Let's write some code. We can separate the files but to make this even more simple, we will use a single HTML file. Our goal is to make a 3D cube.

<html>
<head>
    <title>Your First Three.js Scene</title>
    <style>
        *{
            margin: 0;
        }
        .display{
            position: absolute;
            top: 0;
            left: 0;
            outline: none;
        }
        html, body{
            overflow: hidden;
        }
    </style>
    <script type="module">
        import * as THREE from "https://cdn.skypack.dev/pin/three@v0.131.3-QQa34rwf1xM5cawaQLl8/mode=imports/optimized/three.js"
    </script>
</head>
<body>
    <canvas class="display"></canvas>
</body>
</html>

We created a <canvas> element. Going back to our analogy, the <canvas> element could be thought of as our screen to display our captured scene. Everything from our scene will be displayed or rendered inside this <canvas> element. We then set our basic CSS to hide overflow, remove any margin and give an absolute position to our canvas. We then imported the Three.js module into our <script>.

We will write the remaining code inside the <script> element.

Now we are ready to instantiate our <canvas> inside our script. We can do that using document.querySelector().

//instantiate canvas
const canvas = document.querySelector('.display')

We used the <canvas> element class to link it to our scene. Just like that, we are ready to create our scene. In our scene, we will add a cube mesh. Continuing with our analogy, the cube is the star of our scene. Like all great movie scenes, we need to be specific about our cast. We have to provide two requirements to make our cube mesh. The first is a geometry and the second is a type of material.

Three.js makes it very easy for us. Because, shapes such as: box, sphere, cone, circle, plane and many more geometries are already provided in the library. Different geometries require different inputs. A box geometry requires a width, height and depth float values.

We can also choose from several materials but for now we will go with a Mesh Basic Material. We have an option of adding a color to our material so we will make it Cyan. After we select our parameters we will add the cube to our scene.

//create a scene
const scene = new THREE.Scene()

//create a cube
const cube = new THREE.Mesh(
    //box geometry with a width, height and depth
    new THREE.BoxGeometry(1, 1, 1),

    //apply a mesh basic material to our mesh
    new THREE.MeshBasicMaterial ({
      color: 0x00ffff 
    })
)
//add our mesh to the scene
scene.add(cube)

We have completed one of the three necessary requirements to make our scene. We still need to make our camera and our renderer. Our camera will capture our scene and the renderer will display our scene on our canvas.

Three.js gives us several options for a camera but for now we will go with a Perspective Camera. A perspective camera displays objects closer to the camera as larger and objects further away as smaller. This could simply be represented by a shape called a frustum. A frustum is a cone or pyramidal shaped object with the pointy-end cutoff. The perspective camera displays objects in a way that a cube would look like a frustum. The perspective camera needs four inputs. These are: field of view (FOV), aspect ratio of the display, near value and far value. The FOV is the angle measure from bottom to top given as a float value. The aspect ratio is the canvas width divided by the canvas height. The near and far values are the depth field we want the camera to capture.

//create camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 100)
scene.add(camera)
camera.position.z = 3

Note that the camera position like any object is represented by an x, y and z values with in the scene. By default the object and the camera are both placed at 0, 0, 0. To capture the object we need the camera to be in front of the object. If our monitor had a box shape, the positive z value points towards you and the negative z value points towards the back of the monitor.

One last thing we need to do is to add the renderer. Three.js provides us with several renderer options but for now we will go with WebGLRenderer. We will display our captured scene using the renderer in our canvas. The renderer has a .render method that requires the scene we want to render and the camera we used to capture this scene.

//create renderer
const renderer = new THREE.WebGLRenderer({canvas})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.render(scene, camera)

Look at that! You created your first Hello Cube!

From this view, our cube appears to be just a square. But we are going to work some camera magic and make it rotate. We will do this using Orbit Controls. Orbit control rotates the camera around a given target. In this case, the center of the scene, where our cube is placed. First we will load orbit controls.

import { OrbitControls } from "https://cdn.skypack.dev/three@v0.131.3-QQa34rwf1xM5cawaQLl8/examples/jsm/controls/OrbitControls.js"

And then instantiate it. Orbit control requires the camera and the canvas it will animate on. We will enable a damping of the camera movement that will prevent jerking camera movement. we will also make it auto rotate.

//instantiate OrbitControls after camera and canvas
const controls = new OrbitControls(camera, canvas);

//smooth rotation of camera
controls.enableDamping = true;

//auto rotation of camera
controls.autoRotate = true;

In order to constantly update the scene we need to create a function that will call window.requestAnimationFrame() that calls the function itself continuously. The number of callbacks is usually 60 times per second.

//create a call back function
const updater = () => {
    //call the same function again
    window.requestAnimationFrame(updater)

    //update the orbit controls with every function call
    controls.update()

    //render the scene again with every function call
    renderer.render(scene, camera)
}

//call the function
updater()

Now we can move the camera with in our canvas using our mouse.

From here, the possibilities are endless. Three.js gives developers the ability to utilize WebGL to create responsive, interactive and engaging web content. There are many resources available to read and learn more about Three.js.

https://threejs.org/
https://threejs-journey.xyz/
https://threejsfundamentals.org/

Thank you for your time. I hope this post was helpful to you.

You can find me on at https://twitter.com/nate_dev_