Three JS Tutorial

Install Node.js

The first step in the process is to install "Node.JS". Before installing, check to see if you have it installed.

• Check if Node is already installed by entering this command in Windows PowerShell

node -v

• If it is installed, the command line will respond with a version number. A version number may look like this:

v0.10.35

If it is not already installed, use this link to install the recommended version.

Install NPM

Next, you have to install NPM or "Node Package Manager"

• Again check to see if it is already installed with the following command

npm -v

If it is not already installed, simply enter the following command into Windows PowerShell

npm install -g npm

Create an empty directory and install VITE

Start by creating a project directory somewhere you can find it later and naming it something like "ThreeJS-Project"

Next, we will be installing VITE as the project base for our ThreeJS.

• "cd" into your newly created directory. My "cd" command string looks like this:

cd Documents\GitHub\ThreeJS-Project

Once you are in your directory, enter the following command.

npm init vite

It will then initiate four prompts.

• Name your project (Simply type a project name)
• Name your package (Press enter for default)
• Use the arrow keys to select vanilla, then press enter
• Use the arrow keys to select JavaScript, then press enter




After completing these, it will create a new folder within your project directory. If you are having trouble with the arrow keys not working, use Windows PowerShell or Windows Terminal.

Lastly, we need to do the follow up prompts suggested after the project was created.

• Simply "cd" into the project directory that was just created, and enter the following command:

npm install

Install Three JS

Next we will install Three.js itself.

• Again, "cd" into the project directory that was just created, and enter the following command:

npm install --save three

This will add a few files to your directory. A new folder called node_modules, a package.json, and a package-lock.json.

• These are pregenerated and you don't have to worry about them!