There are a lot of 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 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 will 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: I 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>
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>
Three.js is also available as a package on NPM. This means that if you have Node.js and NPM 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'
This means you can use Three.js along with any JavaScript framework like React, Angular, Vue, etc.
Once you finish setting up your project, let’s start creating.