Skip to content

Install the Three.js Typescript Boilerplate

Tip

This course has been updated. For the newer content, please visit Three.js Typescript Boilerplate

Video Lecture

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. The boilerplate is useful if you have chosen to bypass all the preceding sections, or you already completed the course, and you want to create a brand-new Three.js TypeScript project, and you would like to use a pre created project boilerplate to start 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, you can clone the repository at Three.js-TypeScript-Boilerplate

Enter the command below to clone the repository, install and start it.

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
cd Three.js-TypeScript-Boilerplate
npm install
npm run dev

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

You should see a spinning green wireframe cube, and also be able to rotate it using your mouse.

This is our beginning Three.js Typescript application that we will discuss fully in the next few sections.

<>

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:8080/

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.