Installation

how to install three.js
Before you can do anything with Three.js, you need to get it into your project. Think of it like installing any app — you need to download it first before you can use it.
Every Three.js project needs at least two files:
- An HTML file that defines the webpage
- A JavaScript file where your Three.js code lives
The names below aren't required — you can call them whatever you want — but this guide will use them consistently so things stay clear.
<!DOCTYPE html>
<html lang="en">
head>
meta charset="utf-8" />
title>My first three.js app</title>
style>
body {
margin: 0;
}
</style>
</head>
body>
script type="module" src="/main.js"></script>
</body>
</html>
import * as THREE from 'three';
// Your Three.js code goes here
using a build tool
I personally use a build tool (like Vite) because I build my projects with frameworks like Svelte or React. Build tools make your life easier — they handle imports, optimize your code, and let you use modern JavaScript features.
If you're using a build tool, you probably already have Node.js installed (it comes with npm, the Node package manager). Open your terminal and run:
npm install -D three
This adds Three.js to your
package.jsonfile, right in the root of your project. From there, you can import it in any JavaScript file withimport * as THREE from 'three'.
using a CDN
If you're not using a build tool — maybe you just want a single HTML file to play around with — you can load Three.js directly from a CDN (a Content Delivery Network). Just add a script> tag in your HTML's head>:
<script src="https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js"></script>
Replace version> with the version number you want, like 0.170.0. That's it — no npm install needed.
which one should you pick?
| Approach | Best for |
|---|---|
| Build tool | Real projects, frameworks, production apps |
| CDN | Quick experiments, single HTML files, learning |
Both work. Start with whichever feels easier. You can always switch later.
