Three.js - Installation

There are many ways to include Three.js in your project. You can use any of these following methods to get started using Three.js. Then open your favorite code editor and get going.

Download the complete Three.js project

Download the complete Three.js project into your system. You can download it here or from GitHub. Extract the three.js-master.zip file and look inside the build folder. You can find two three.js, three.min.js, which is just a minified version. Add any of these two files into your project folder and link them to your HTML file. Now you are good to use Three.js in your project.

Note − We recommend using the minified version as it loads faster.

Insert the following <script> tag into the <head> element of your HTML with a path to the threejs.min.js file.

<script src='/path/to/threejs.min.js'></script>

Use CDN links

You can link the files from a CDN (Content Delivery Network), a remote site dedicated to hosting files so that you can use them online. You can use any of these websites −

Insert any of the following <script> tags into the <head> element of your HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>

or

<script src="https://cdn.jsdelivr.net/npm/three@0.127.0/build/three.min.js"></script>

Install the package of Three.js

Three.js is also available as a package on NPM.If you have Node.js set up on your computer, you can install it using npm or yarn.

npm install three

or

yarn add three

Then, you can import Three.js from the three.module.js file into your JavaScript file

import * as THREE from 'three'

You can use Three.js along with any JavaScript framework like React, Angular, Vue.

Once you finish setting up your project, let's start creating.

Advertisements