Deploying to Production

Video Lecture

Deploying to Production Deploying to Production

Description

In this next several lessons, I will show you how to deploy your Threejs project to a production server on the internet.

The next lessons will cover,

At the end, our Threejs project, developed using TypeScript, will be officially on the internet for the public to see.

You can use any example from any section of the course as your project to deploy. Or even a project that you've written yourself along the way.

For this example, I will use the code from the ballgame branch of my Three.js-TypeScript-Boilerplate,

The Ball Game

The ballgame branch is a good example to use since it is significantly more sophisticated that the default boilerplate master branch.

Some of the features of The ballgame branch are

  • It uses the familiar Boilerplate Client and Server TypeScript structure with the Nodejs server
  • It is a multiplayer game
  • It demonstrates server side Cannonjs physics
  • It uses SocketIO for the game multiplayer communications
  • It demonstrates using several materials including the MeshMatcapMaterial, MeshBasicMaterial and MeshPhongMaterial with environment maps.
  • It demonstrates the Reflector object used for the floor mirror effect
  • It demonstrates the CubeCamera which can also be used for more realistic reflections
  • It demonstrates loading a pre built 3d model
  • It demonstrates a Custom Camera controller which is a cross between the Orbit and trackball controls.
  • It demonstrates modifying the UI in case of Desktop or Mobile browser. (PointerLock API or XYControllers)

All these things together make a much more impressive Threejs project that demonstrates many of the considerations needed when building a Threejs project from the ground up.

To download the Three.js-TypeScript-Boilerplate and switch to the ballgame branch,

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git

cd Three.js-TypeScript-Boilerplate

git checkout ballgame 

npm install

npm install -g typescript

npm run dev