Skip to content

Install Three.js Course Boilerplate

Video Lecture

Install the Three.js Typescript Boilerplate Install the Three.js Typescript Boilerplate

Description

Note

This section is optional. If you completed all the sections before this, then you already have the project created. This boilerplate is useful if you have chosen to bypass all the preceding sections, or you have already finished the course, and you would like to use a Three.js TypeScript project template that you are familiar with.

We will need to ensure we have a git client installed.

On Windows we can use Git for Windows.

Test that it is installed,

git -v

It should indicate a version. If it shows an error, then install it from https://gitforwindows.org/

After confirming you have a git client working, then you can clone the repository from Three.js-Boilerplate-TS-Vite

Now, before cloning, consider if you want to later push your changes back to GitHub. If so, and you already have your own GitHub account, you can fork this repository, and git clone your own version.

git clone https://github.com/<your github-account-name>/Three.js-Boilerplate-TS-Vite.git

Otherwise, clone using the default repository URL.

git clone https://github.com/Sean-Bradley/Three.js-Boilerplate-TS-Vite.git

Now change folder, install and run.

cd Three.js-Boilerplate-TS-Vite
npm install
npm run dev

Open a browser and Visit http://localhost:5173/

You should see a multi-coloured wireframe cube with OrbitControls, Dat.GUI and Stats.js.

You will be able to rotate the cube using your mouse or touch screen.

<>

GitHub pages

If you plan to publish your code on GitHub pages, then the easiest option, is to fork this Three.js-Boilerplate-TS-Vite repository first.

Then after you have installed the boilerplate, edited your code and are happy with it.

You can build the production version and preview it locally in the browser.

npm run build
npm run preview

Visit http://localhost:4173/

Then to deploy to GitHub pages,

npm run deploy

Wait 5 minutes for the deployment to finalize on the GitHub network.

Then visit,

https://<your lowercase github username>.github.io/Three.js-Boilerplate-TS-Vite/

E.g.,

https://sean-bradley.github.io/Three.js-Boilerplate-TS-Vite/

Cloning Into A Custom Folder

git clone will by default create a new folder being the same name as the repository and download all the files into it. You can clone into a custom folder instead.

E.g., If you wanted to use the folder example-1

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git ./example-1

You'd then cd into the new example-1 folder instead.

cd example-1

then, install and start it.

npm install
npm run dev

Open a browser and Visit http://localhost:5173/

Reverting A Git Repository Back To Head

If you clone the boilerplate, you then make some changes, and then you decide to go back to the original boilerplate, you can reset it back to the head version by typing

git reset --hard

Note that you will lose any changes that you made.