Skip to content

Begin Creating the Three.js Project

Video Lecture

Begin Creating the Three.js Project 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
19
20
21
<!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

Comments