Is there an example of a database connection with playcanvas?

#1

I want to add firebase to my playcanvas application. I’ve created a database to test it but I don’t know how to add it to my project.

#2

Hi @Axel_Saucedo,

There isn’t an example, that I know of, to demonstrate adding Firebase to a Playcanvas project. But it’s quite easy, here are some steps:

  1. Add the Firebase SDKs to your Playcanvas project. Download the firebase .js files for the relevant components (firebase-app.js, firebase-auth.js etc.) and upload them to your Playcanvas project.

You can find links to those files in this guide, step 3:

https://firebase.google.com/docs/web/setup

  1. Make sure all Firebase SDK scripts are first in your scripts loading order:

https://developer.playcanvas.com/en/user-manual/scripting/loading-order/

  1. Grab the firebase config object from your google firebase dashboard. It will look like this:
var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",
};
  1. You are ready to initialize the firebase app, you can put this code in any regular Playcanvas script. The initialize method will be a good place for that:
MyScript.prototype.initialize = function(){

   var firebaseConfig = {
      // ...
   };

   // Initialize Firebase
   firebase.initializeApp(firebaseConfig);

};
3 Likes
#3

Hello. Here is my take on it :slight_smile:

  1. Learn to use https://developer.playcanvas.com/en/tutorials/htmlcss---live-updates/.
  2. Use JS/HTML knowledge to communicate both ways (from HTML-front to 3D backdrop and back), but be aware of the minor/small adjustment and tricks needed to make basic JS work at PlayCanvas code editor.
  3. Use any DB that can work with JS.
    …
  4. As a PS: if discomfort with HTML-rendered buttons, one can play making them invisible on top of 3D button (this can save time in regards to regular 3D backdrop functionality >> in the shape of raycasting or likewise)