Skip to content

The Ballgame

Video Lecture

The Ballgame The Ballgame The Ballgame

Description

This example is a conglomeration of many things learned in this course and all culminating into a multiplayer game using Threejs, Socket.io and server side Cannon physics.

Hosting this example in production can be done by matching what was learned when we hosted the Threejs/Socket.IO example from the previous several lessons since it will also require to be started server side using Nodejs and Express and hosted behind an Nginx reverse proxy in case you also wanted to more easily bind a domain name and SSL certificate.

https://ballgame.sbcode.net

The Ballgame code is a branch of my official boilerplate.

We can clone the boilerplate repository into its own folder.

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git ballgame

Change directory to the new ballgame folder that was created.

cd ballgame

Checkout the ballgame branch so that we get this version of the code.

git checkout ballgame

Install the dependencies.

npm install

Start the development version.

npm run dev

Setting up the Production version

To build the production version,

npm build
tsc -p ./src/server
npm start

You can use an existing production server or organize a new server by following the Host using an Nginx Server lesson.

Copy the package.json and sub folders of the ./dist/ directory to your server.

Continue to follow the instructions in the previous lesson Setup Nginx as a Reverse Proxy