Install Three Js

This document outlines the installation and project structure for a three.js application, including the necessary HTML and JavaScript files. It provides two options for setting up the project: using npm with a build tool like Vite or importing three.js from a CDN. Additionally, it discusses how to manage dependencies, use addons, and prepare the application for production deployment.

Uploaded by

babbba48

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

12 views3 pages

Install Three Js

Uploaded by

babbba48

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

You are on page 1/ 3

nstallation

Project structure
Every three.js project needs at least one HTML file to define the webpage, and a
JavaScript file to run your three.js code. The structure and naming choices below
aren't required, but will be used throughout this guide for consistency.

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';

...
public/
The public/ folder is sometimes also called a "static" folder, because the files it
contains are pushed to the website unchanged. Usually textures, audio, and 3D
models will go here.
Now that we've set up the basic project structure, we need a way to run the project
locally and access it through a web browser. Installation and local development can
be accomplished with npm and a build tool, or by importing three.js from a CDN.
Both options are explained in the sections below.

Option 1: Install with NPM and a build tool

Development
Installing from the npm package registry and using a build tool is the recommended
approach for most users — the more dependencies your project needs, the more likely
you are to run into problems that the static hosting cannot easily resolve. With a
build tool, importing local JavaScript files and npm packages should work out of
the box, without import maps.

Install Node.js. We'll need it to load manage dependencies and to run our build
tool.
Install three.js and a build tool, Vite, using a terminal in your project folder.
Vite will be used during development, but it isn't part of the final webpage. If
you prefer to use another build tool, that's fine — we support modern build tools
that can import ES Modules.

# three.js
npm install --save three

# vite
npm install --save-dev vite
Installation added node_modules/ and package.json to my project. What are they?
Improve your editor auto-completion with jsconfig or tsconfig
From your terminal, run:
npx vite
What is npx?
If everything went well, you'll see a URL like http://localhost:5173 appear in your
terminal, and can open that URL to see your web application.
The page will be blank — you're ready to create a scene.

If you want to learn more about these tools before you continue, see:

three.js journey: Local Server

Vite: Command Line Interface
MDN: Package management basics
Production
Later, when you're ready to deploy your web application, you'll just need to tell
Vite to run a production build — npx vite build. Everything used by the application
will be compiled, optimized, and copied into the dist/ folder. The contents of that
folder are ready to be hosted on your website.

Option 2: Import from a CDN

Development
Installing without build tools will require some changes to the project structure
given above.

We imported code from 'three' (an npm package) in main.js, and web browsers don't
know what that means. In index.html we'll need to add an import map defining where
to get the package. Put the code below inside the <head></head> tag, after the
styles.

We'll also need to run a local server to host these files at URL where the web
browser can access them. While it's technically possible to double-click an HTML
file and open it in your browser, important features that we'll later implement, do
not work when the page is opened this way, for security reasons.

Install Node.js, then run serve to start a local server in the project's directory:

npx serve .
If everything went well, you'll see a URL like http://localhost:3000 appear in your
terminal, and can open that URL to see your web application.
The page will be blank — you're ready to create a scene.

Many other local static servers are available — some use different languages
instead of Node.js, and others are desktop applications. They all work basically
the same way, and we've provided a few alternatives below.

More local servers

Production
When you're ready to deploy your web application, push the source files to your web
hosting provider — no need to build or compile anything. The downside of that
tradeoff is that you'll need to be careful to keep the import map updated with any
dependencies (and dependencies of dependencies!) that your application requires. If
the CDN hosting your dependencies goes down temporarily, your website will stop
working too.

IMPORTANT: Import all dependencies from the same version of three.js, and from the
same CDN. Mixing files from different sources may cause duplicate code to be
included, or even break the application in unexpected ways.

Addons
Out of the box, three.js includes the fundamentals of a 3D engine. Other three.js
components — such as controls, loaders, and post-processing effects — are part of
the addons/ directory. Addons do not need to be installed separately, but do need
to be imported separately.

The example below shows how to import three.js with the OrbitControls and
GLTFLoader addons. Where necessary, this will also be mentioned in each addon's
documentation or examples.

import * as THREE from 'three';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const controls = new OrbitControls( camera, renderer.domElement );

const loader = new GLTFLoader();
Some excellent third-party projects are available for three.js, too. These need to
be installed separately — see Libraries and Plugins.

Next Steps
You're now ready to create a sc