---
date: 2026-5-20
---

# Installation

![three.js logo](https://images.seeklogo.com/logo-png/43/1/three-js-logo-png_seeklogo-431124.png)

## 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:

1. An **HTML file** that defines the webpage
2. 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.

<div style="font-size: .75rem">index.html</div>

```html
<!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>
```

<div style="font-size: .75rem">main.js</div>

```javascript
import * as THREE from 'three';

// Your Three.js code goes here
```

### using a build tool

I personally use a build tool (like [Vite](https://vitejs.dev)) 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:

```bash
npm install -D three
```

> This adds Three.js to your `package.json` file, right in the root of your project. From there, you can import it in any JavaScript file with `import * 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>`:

```html
<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.
