Skip to content

Begin Creating the Three.js Project

Tip

This course has been updated. For the newer content, please visit Create Course Boilerplate

Video Lecture

Begin Creating the Three.js Project

 (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

Initialize the New Project

Open a command prompt and create a new folder on your system somewhere.

mkdir Three.js-TypeScript-Tutorial

CD into the new folder.

cd Three.js-TypeScript-Tutorial

Initialize a new project with NPM

npm init

Press Enter several times to accept all defaults.

Install Three.js Library

Install the Three.js library.

npm install three --save-dev

Create Extra Project Files and Folders

  1. Open the project using VSCode. code .

  2. Create a new folder in the project called dist

  3. Inside the dist folder create 2 more folders called client and server

  4. In the new dist/client folder add this index.html file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Three.js TypeScript Tutorials by Sean Bradley : https://sbcode.net/threejs</title>
    <style>
      body {
        overflow: hidden;
        margin: 0px;
      }
    </style>
  </head>

  <body>
    <script type="module" src="bundle.js"></script>
  </body>
</html>

  1. Create a new folder in the project called src

  2. Inside the src folder create 2 more folders called client and server

Your folder structure and files should now resemble,

|-- Three.js-TypeScript-Tutorial
    |-- dist
        |-- client
            |-- index.html
        |-- server
    |-- node_modules
        |-- three
            |-- (Several extra files and folders containing the Three.js source code)
    |-- src
        |-- client
        |-- server
    |-- package.json
    |-- package-lock.json