Welcome!

Welcome to the exciting world of 3D web development! This free course is a quick look into how 3D games and applications are developed for the web.

By the end of the course, you should expect to learn the following concepts:

• What is WebGL
• What is Three.js
• Why Three.js is preferred over WebGL
• How to set up your development environment
• How to create a your very own, simple 3D web app!

What is WebGL?

WebGL (Web Graphics Library) is a JavaScript API built into most web browsers for generating 2D and 3D graphics. It works by communicating directly with your computer's graphics hardware through the HTML <canvas> element. WebGL allows developers to execute graphics programs (called shaders) on the GPU, providing the technical foundation for all web-based 3D graphics.

However, WebGL is notoriously low-level and complex, requiring developers to manage memory buffers, write shader programs, and handle numerous technical details just to render simple shapes.

What is Three.js?

Three.js is a open-source JavaScript library built on top of WebGL. Three.js addresses many of the issues of programming straight WebGL code by abstracting away much of the complexity, offering developers a more accessible way to create 3D content for the web. In addition, it also includes a significant number of "helper" classes for streamlining common tasks like creating cameras, adding post-processing effects and more.

Three.js vs. WebGL Comparison

The complexity difference between Three.js and raw WebGL is substantial. A simple example of rendering a triangle demonstrates this clearly: implementing it in pure WebGL requires approximately 162 lines of complex code dealing with shaders, buffer allocation, and program linking. The equivalent Three.js implementation requires only about 55 lines of more readable, higher-level code. This abstraction allows developers to focus on creating rather than wrestling with graphics implementation details.

Development Environment Setup

Before you can start writing a Three.js app, you need to make sure you have Node.js installed on your system. Node.js comes with Node Package Manager (more commonly referred to as "npm"). You'll use npm to install all of the dependencies for your application, including the Three.js library.

Installing A Build Tool

The Three.js developers recommend using a build tool so Three.js can be easily bundled with your application code. The Three.js documentation recommends using Vite, a popular build tool.

Run the following command in the terminal to install Vite as a development dependency (meaning it does not get packaged with your final code, it is only used during the development process).

npm install --save-dev vite

Installing Three.js

Next you will need to install the Three.js library by running the following command in the terminal

npm install three

Core Three.js Concepts

Scene

The scene is the root container for all the 3D objects in your application. Objects are added to the scene as a hierarchy of parent/child objects. When an object is a child of another, it inherits the parent's transformations (a fancy word that means position, rotation and scale), allowing for complex relationships between components (such as wheels moving with a car body).

Geometry

Geometry defines the structural aspects of 3D objects - the vertices, faces, and overall shape. Three.js provides numerous built-in geometries like boxes, spheres, and planes, though generally you'll be importing 3D models you buy online or create yourself using 3D modeling software.

Material

A material defines the visual properties of objects, controlling aspects like color, texture, and how light interacts with the surface. Geometry and material are combined together to create a complete visual description of a 3D object.

Meshes

A mesh combines geometry and material adds additional properties like position, rotation, and scale. These properties control where and how objects appear in the 3D world. Meshes can be manipulated programmatically to create animations and interactions.

Camera

The camera represents the viewpoint from which the scene is observed. Similar to a real camera, it has properties like position, orientation, field of view, and aspect ratio. Three.js offers different camera types, PerspectiveCamera being most common as it mimics how human vision perceives depth (i.e., objects get smaller the further they are from the camera).

Renderer

The renderer takes the scene and camera information and draws the output to the <canvas> element. The WebGLRenderer uses WebGL under-the-hood for high-performance rendering with hardware acceleration.

Animation Loop

For dynamic content, Three.js employs an animation loop that continuously updates the scene and re-renders it many times per second (typically matching the monitor's refresh rate). This loop provides the opportunity to update object properties like position and rotation to create movement and interactivity.

Source Control

Source control (or version control) is a system that—at its essence—enables you to take snapshots of your code at any point in time and store them in a remote server. It can do a lot more than that, but the most important uses for source control are as follow:

• Creates backups of your code
• Allows you to revert to previous versions
• Enables collaboration with other developers
• Documents the history and evolution of your project
• Built-in tools for comparing files at different points in time

Getting Started with Git and GitHub

Using all the features of git takes a long time to master, but you can get started with just a few simple commands.

1. Install Git
   • Download and install Git from git-scm.com
   • Verify installation by typing git --version in your terminal
2. Create a GitHub Account
   • Sign up at github.com
3. Set Up Your First Repository
   • Go to GitHub and click "New repository"
   • Name your repository and add an optional description
   • Select "Add a README file" and "Add .gitignore" (choose Node.js template)
   • Choose a license if desired
   • Click "Create repository"
4. Clone the Repository to Your Computer
   • On GitHub, click the "Code" button and copy the URL
   • In your terminal, navigate to where you want the project folder
   • Type git clone [paste-URL-here]
5. Basic Workflow
   • Make changes to your files
   • Stage changes with git add . (the dot means "all files")
   • Commit changes with git commit -m "Brief description of changes"
   • Push to GitHub with git push
6. Check Status Anytime
   • Use git status to see which files have been modified
   • Use git log to see your commit history

This workflow creates regular snapshots of your code that you can always return to, while maintaining a complete backup in the cloud.