Skip to content

Begin Creating the Three.js Project

Tip

This course was updated in 2024. For the newer content, please visit Create Course Boilerplate

Video Lecture

Begin Creating the Three.js Project

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