Skip to content

Create Course Boilerplate

Video Lecture

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

Description

We will create a course boilerplate using Vite.

Vite is a French word meaning "quick". It is pronounced "veet".

Install Vite

Open a command prompt on your system somewhere.

And we will install Vite.

npm create vite@latest

Next, enter a project name. This will be used as the root folder name of our project.

Three.js-TypeScript-Boilerplate

Press Enter at the next prompt to confirm the package name. Note that it has lower-case letters and also replaced the period sign.

? Package name: ยป three-js-typescript-boilerplate

Select the Vanilla framework option.

And then select the TypeScript option.

It will scaffold a new project in a folder named Three.js-TypeScript-Boilerplate

We should change directory to that new folder,

cd Three.js-TypeScript-Boilerplate

Install required packages as shown in the new package.json file,

npm install

And then we can run the dev version of the project.

npm run dev

If all is well, we should see a message that our project is available at http://localhost:5173/

Open http://localhost:5173/ in your browser.

It shows a basic template configured for writing Vanilla JS in TypeScript.

Open the project in our IDE

Now to open the project using VSCode.

Press Ctrl - C twice to exit the currently running Vite development server process.

Then in the same folder, type,

code .

It should open VSCode with the project root being the current folder. (Three.js-TypeScript-Boilerplate)

Now, there are many unnecessary files in this project, so we will delete most of those to be left with the minimal structure that we need to continue.

Delete everything until you are left with this folder and file structure.

|-- Three.js-TypeScript-Boilerplate
    |-- node_modules
        |-- (Don't delete any files and folder from this folder)
    |-- public (Delete all files from this folder)
    |-- src (Delete all files from the folder, except for these three files below)
        |-- main.ts
        |-- style.css
        |-- vite-env.d.ts
    |-- .gitignore
    |-- index.html
    |-- package-lock.json
    |-- package.json
    |-- tsconfig.json

If you are using the same version of Vite as I showed in the video, you would have deleted just the files vite.svg, counter.ts and typescript.svg.

Replace Contents of Remaining Files.

Replace the contents of index.html, main.ts and style.css with the code below.

./index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js TypeScript Tutorials by Sean Bradley : https://sbcode.net/threejs</title>
  </head>

  <body>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

./src/style.css

1
2
3
4
body {
  overflow: hidden;
  margin: 0px;
}

./src/main.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import './style.css'
import * as THREE from 'three'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 1.5

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshNormalMaterial({ wireframe: true })

const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

function animate() {
  requestAnimationFrame(animate)

  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  renderer.render(scene, camera)
}

animate()

Note

The project will still contain errors at this time. We will fix them in the next lesson.

Comments