Skip to content

Install Three.js Course Boilerplate

Video Lecture

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

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

  • One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
  • After successful purchase, the video will automatically start playing.
  • You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
  • Do not refresh the browser since it will invalidate the session.
  • If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
  • This Pay Per View option does not permit downloading this video for later viewing or sharing.
  • All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

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.