ThreeJS Typescript

Example project for ThreeJS with Typescript and Parcel

Installing

We need parcel to bundle modules. You can install it globally.

npm install -g parcel-bundler

Parcel will bundle Three.js with our own modules, and convert Typescript to Javascript.

npm install three
npm install @types/three
npm install typescript

Create a dev folder with your HTML and Typescript files. Create an empty dist folder.

Running

# Watch mode
npm run dev

# build
npm run build

HTML

Remember that parcel compiles all files and will convert typescript to javascript. That means your html file can load a .ts file!

<script defer src="./ts/game.ts"></script>

Typescript

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

class Game {

    private scene: THREE.Scene
    private camera: THREE.Camera
    private renderer: THREE.Renderer

    constructor() {
        this.scene = new THREE.Scene()
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        this.camera.position.z = 40

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

        const light = new THREE.AmbientLight(0x404040)
        this.scene.add(light)

        this.gameLoop()
    }

    gameLoop() {
        this.renderer.render(this.scene, this.camera)
        requestAnimationFrame(() => this.gameLoop())
    }
}
new Game()

Bugs

ParcelJS has a CSS bug!! Temporary fix with --no-minify. Todo: downgrade parcel to 1.8.1.