THREE Multiplayer

Looking for a React three fiber multiplayer template? check out R3F.Multiplayer

My boilerplate Node.js server and client setup for Three.js multiplayer projects using Socket.io

• Installation
• Usage
• Pushing to Heroku

Installation

1. Clone the repo, e.g git clone https://github.com/juniorxsound/THREE-Multiplayer.git
2. Run npm install to install all the dependencies

Tested on macOS 10.13.3 using Node.js v8.9.3 and npm v5.6.0

Usage

Use npm run start to start the server and bundler

The start script launches:

• nodemon Which restarts the server on every change (port: 1989)
• watchify Which bundles the client code from src/ on every change to ./public/js/bundle.js

On connection each client recives it's uniqe ID and on every movement broadcasts to all the other clients all the locations of everyone connected

{
  'some-user-id': {
    position: [0.4, 1.4, -0.5],
    rotation: [0, 0, 0]
  }
}

You can also run npm run build to bundle and minify the client code to ./public/js/bundle.min.js

Browserify is setup to transform both ES6 Javascript and glslify for GLSL shader bundling (example of a project that uses glslify)

Pushing to Heroku

This is a detailed tutorial of how to push your code to Heroku through Github to serve your experience publicly

Special thanks to Dror Ayalon