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
Top comments (0)