M-NOTE: Three.js + Firebase

emily leung

Published in

PROJECT REDBACK

2 min readOct 4, 2017

M-NOTE 0008 — Monday 25 September 2017

What is Three.js?

Three.js is an open-source JavaScript 3D library used to build interactive scenes on the web.

What is Firebase?

Firebase is a mobile and web application development platform used for backend data management and multiplayer use.

PROCESS

STEP 1 —Setting up a Three.js Multiplayer Game

Setting up a scene in Three.js to accommodate multiplayers is ever so slightly different and so the process must be managed with a close eye. We’ll first start with the basic setup of files:

Index.html
css/Main.css
js/Main.js
js/three.js — referenced file from Three.js or can be a minified link: https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js

Each file serves its own specific purpose:

Index.html — web page structure with referenced scripts
Main.css — web page visual markup
Main.js — sets up the Three.js scene using the main functions (init, animate, render and onWindowResize)

STEP 2 — Setup Index.html file

This is where we hold:

html document setup

<!doctype html>
<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>

2. Title of scene (head)

<title>3D Multiplayer Game</title>

3. Stylesheet reference (head)

<link rel="stylesheet" href="css/Main.css" />

4. Three.js file reference (head)

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

5. Player Controls file reference (head)

<script src="js/lib/PlayerControls.js"></script>

6. Div that holds the scene (body)

<div id="container"></div>

7. JavaScripts that we will write (body)

<script src="js/Player.js"></script>
<script src="js/Game.js"></script>
<script src="js/Main.js"></script>

The resulting script at this stage of the tutorial for Index.html:

<!doctype html>
<html>
  <head>
    <title>3D Multiplayer Game</title>
    <link rel="stylesheet" href="css/Main.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
    <script src="js/lib/PlayerControls.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script src="js/Player.js"></script>
    <script src="js/Game.js"></script>
    <script src="js/Main.js"></script>
  </body>
</html>

STEP 3 — Setting up the Three.js Scene

https://github.com/PiusNyakoojo/PlayerControls

STEP X — Make a project in Firebase

© Emily Y Leung and Project Redback, 2017. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to Emily Y Leung and Project Redback with appropriate and specific direction to the original content.

Last modified on Monday 25 September 2017