Welcome to Chapter 1! Before we dive headfirst into creating mind-blowing 3D experiences with Three.js, we need to get our digital workshop ready. This means setting up a development environment. Don't worry, it's not as intimidating as it sounds! We'll go through the essential tools and steps to get you coding in no time.
The core of our 3D web development will involve writing HTML, CSS, and JavaScript. For this, you'll need a few key pieces of software. The most crucial one is a code editor. Think of this as your digital notepad, but infinitely more powerful, offering syntax highlighting, auto-completion, and other features that make writing code a breeze.
There are many excellent code editors available, most of which are free. For beginners, we highly recommend Visual Studio Code (VS Code). It's popular, feature-rich, and has a vast ecosystem of extensions that can further enhance your development experience.
Here's how to get started with VS Code:
- Download and Install Visual Studio Code: Head over to the official VS Code website (code.visualstudio.com) and download the version appropriate for your operating system (Windows, macOS, or Linux). Follow the installation prompts.
- Create a Project Folder: On your computer, create a new folder for your Three.js project. You can name it anything you like, for example, 'my-first-3d-project'.
- Open the Folder in VS Code: Once VS Code is installed, open it. You can then go to
File > Open Folder...and select the project folder you just created. This will set up VS Code to work specifically within that folder.
To run and view our 3D scenes, we'll need a web browser. Modern browsers like Chrome, Firefox, Safari, and Edge are all excellent choices. They have built-in developer tools that are indispensable for debugging and inspecting our web pages.
For serving our web pages locally (meaning running them from our own computer), we'll use a simple tool called a local development server. This is important because some web features, especially those involving loading files, behave differently when run directly from a file path versus being served over a local network. VS Code has a fantastic extension that provides this functionality.
Let's get that set up:
- Install the 'Live Server' Extension: In VS Code, click on the Extensions icon in the sidebar (it looks like a stack of squares). Search for 'Live Server' and install the one published by Ritwick Dey.
- Create Your First HTML File: Inside your project folder, create a new file named
index.html. This will be the entry point for your 3D experience.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First 3D Scene</title>
<style>
body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<script src="script.js"></script>
</body>
</html>- Create Your First JavaScript File: In the same project folder, create another new file named
script.js. This is where our Three.js code will live.
console.log('Hello Three.js World!');- Start the Live Server: Right-click on your
index.htmlfile in VS Code's Explorer sidebar. From the context menu, select 'Open with Live Server'. Your default web browser should open automatically, displaying a blank page with the text 'Hello Three.js World!' in the browser's developer console (you can usually open the console by pressing F12).
This might seem like a small step, but you've now successfully set up a basic development environment for creating 3D web experiences! You have your code editor, a place to write your code, and a way to instantly see your changes in the browser. In the next sections, we'll start introducing Three.js itself and begin building our first 3D scene.
graph TD
A[You] --> B(Code Editor - VS Code)
B --> C{Project Folder}
C --> D[index.html]
C --> E[script.js]
D --> F(Browser)
E --> F
F -- Reloads Automatically --> B