Begin Creating the Three.js Project

Video Lecture

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