Begin Creating the Three.js Project

Video Lecture

Begin Creating the Three.js Project Begin Creating the Three.js Project Begin Creating the Three.js Project Begin Creating the Three.js Project

Description

Initialise the New Project

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

1
mkdir Three.js-TypeScript-Tutorial

Initialise the project with NPM

1
npm init

Press enter several times to accept all defaults.

Install Three.js Library

Install the Three.js library.

1
npm install three

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
<!DOCTYPE html>
<html>

<head>
    <title>Three.js TypeScript Tutorials by Sean Bradley</title>
</head>

<body>
    <script type="module" src="client.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,

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
|-- 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