Installation

three.js logo

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.

index.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>
main.js
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.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>:

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