Client Side Dependency Imports

Video Lecture

Description

We now solve the client.ts import dependencies and add routes and paths to allow our client.ts, and compiled client.js to use identical ES6 import syntax simultaneously.

See Video for all npm commands and the order of execution.

./src/client/client.ts

import * as THREE from '/build/three.module.js'

const scene: THREE.Scene = new THREE.Scene()

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

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

const geometry: THREE.BoxGeometry = new THREE.BoxGeometry()
const material: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
})

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

camera.position.z = 2

var animate = function () {
    requestAnimationFrame(animate)

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

    renderer.render(scene, camera)
}

animate()

./src/client/tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "outDir": "../../dist/client",
        "baseUrl": ".",
        "paths": {
            "/build/three.module.js": ["../../node_modules/three/src/Three"]
        },
        "moduleResolution": "node"
    },
    "include": ["**/*.ts"]
}

./src/server/server.ts

import express from 'express'
import path from 'path'
import http from 'http'

const port: number = 3000

class App {
    private server: http.Server
    private port: number

    constructor(port: number) {
        this.port = port
        const app = express()
        app.use(express.static(path.join(__dirname, '../client')))
        app.use(
            '/build/three.module.js',
            express.static(
                path.join(
                    __dirname,
                    '../../node_modules/three/build/three.module.js'
                )
            )
        )

        this.server = new http.Server(app)
    }

    public Start() {
        this.server.listen(this.port, () => {
            console.log(`Server listening on port ${this.port}.`)
        })
    }
}

new App(port).Start()

At the end of this section, all imports and types for both the server.ts and client.ts will be properly linked, and we can then compile and view the project and see a rotating 3D wireframe cube.

tsc -p ./src/server
tsc -p ./src/client
node dist/server/server.js

Open a browser and visit http://127.0.0.1:3000/

Project Zip

There are a lot of small details discussed so far, and you may have missed something. If your project does not work so far, you can compare it with the files in this zip. This zip contains all the files as they should be at the end of this section.

Three.js-TypeScript-Tutorial.zip

Save the files from the zip into a spare drive, open a console into it, CD into the project folder that contains package.json

cd Three.js-TypeScript-Tutorial

and then run the install process manually.

npm install
tsc -p ./src/server
tsc -p ./src/client
node dist/server/server.js

Visit http://127.0.0.1:3000 in your browser and you should see a spinning green wire frame cube.

If when starting, you see the error

...
events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use :::3000
... etc, and many more lines

This error means that port 3000 is already in use somewhere.

You probably have another project started on your PC somewhere using port 3000. Close that project and then try restarting again.

Comments