Skip to content

Commit

Permalink
Fix and update example to latest Deps and Firebase
Browse files Browse the repository at this point in the history
  • Loading branch information
@andronat
andronat committed Mar 30, 2020
1 parent 8ff7b0c commit 0b029a7
Showing 1 changed file with 51 additions and 53 deletions.
104 changes: 51 additions & 53 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@
<title>Dev Example — naf-firebase-adapter</title>
<meta name="description" content="Dev Example — naf-firebase-adapter">

<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<!-- Tempoary custom version that includes NAF.adapters.register() -->
<script src="https://rawgit.com/netpro2k/networked-aframe/feature/register-adapter/dist/networked-aframe.js"></script>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/networked-aframe/dist/networked-aframe.min.js"></script>
<script src="/dist/naf-firebase-adapter.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-database.js"></script>

<script src="https://unpkg.com/aframe-randomizer-components@^3.0.1/dist/aframe-randomizer-components.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.5/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-randomizer-components@^3.0.2/dist/aframe-randomizer-components.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.1.3/dist/aframe-particle-system-component.min.js"></script>

<script>
// Setup Firebase
Expand All @@ -21,7 +22,7 @@
Steps to setup:
1. Sign up for Firebase account: https://firebase.google.com/
2. Create a new project
3. Go to Database -> Rules and change them to the following (warning: not safe for production, just developing)
3. Go to Database -> Realtime Database -> Rules and change them to the following (warning: not safe for production, just developing)
{
"rules": {
".read": true,
Expand All @@ -33,31 +34,18 @@
6. Click "Add Firebase to your web app"
7. Copy the credentials below
8. Remove the console.error
*/
*/
window.firebaseConfig = {
authType: 'none',
apiKey: 'your-api-key',
authDomain: 'xxx.firebaseapp.com',
databaseURL: 'https://xxx.firebaseio.com'
databaseURL: 'https://xxx.firebaseio.com',
projectId: "your-projectId",
storageBucket: "your-storageBucket",
messagingSenderId: "your-messagingSenderId",
appId: "your-appId",
measurementId: "your-measurementId"
};

// Define custom schema for syncing avatar color, set by random-color
NAF.schemas.add({
template: '#avatar-template',
components: [
'position',
'rotation',
{
selector: '.head',
component: 'material',
property: 'color'
}
]
});
// Called by Networked-Aframe when connected to server
function onConnect() {
NAF.log.log("onConnect", new Date());
}
console.error('You need to enter your own firebase credentials. Remove this error when you have.');
</script>
</head>
Expand All @@ -69,36 +57,26 @@
adapter: firebase;
">
<a-assets>

<img id="grid" src="https://img.gs/bbdkhfbzkk/stretch/https://i.imgur.com/25P1geh.png" crossorigin="anonymous">
<img id="sky" src="http://i.imgur.com/WqlqEkq.jpg" crossorigin="anonymous" />

<!-- Templates -->

<!-- Avatar -->
<script id="avatar-template" type="text/html">
<a-entity class="avatar" networked-audio-source>
<a-sphere class="head" color="#5985ff" scale="0.45 0.5 0.4" random-color></a-sphere>
<a-entity class="face" position="0 0.05 0">
<a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
<a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
</a-entity>
<img id="sky" src="https://img.gs/bbdkhfbzkk/2048x2048,stretch/http://i.imgur.com/WqlqEkq.jpg" crossorigin="anonymous">

<template id="avatar-template">
<a-entity class="avatar" networked-audio-source>
<a-sphere class="head" color="#5985ff" scale="0.45 0.5 0.4" random-color></a-sphere>
<a-entity class="face" position="0 0.05 0">
<a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
<a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
</a-entity>
</script>

<script id="simple" type="text/html">
<a-sphere></a-sphere>
</script>

<!-- /Templates -->
</a-entity>
</template>
</a-assets>

<a-entity id="player" networked="template:#avatar-template;showLocalTemplate:false;" camera="userHeight: 1.6" wasd-controls
look-controls>
<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" camera position="0 1.3 0"
wasd-controls look-controls>
</a-entity>

<a-entity position="0 0 0" geometry="primitive: plane; width: 10000; height: 10000;" rotation="-90 0 0" material="src: #grid; repeat: 10000 10000; transparent: true; metalness:0.6; roughness: 0.4; sphericalEnvMap: #sky;"></a-entity>
Expand Down Expand Up @@ -150,6 +128,26 @@
}
</style>

<script>
// Define custom schema for syncing avatar color, set by random-color
NAF.schemas.add({
template: '#avatar-template',
components: [
'position',
'rotation',
{
selector: '.head',
component: 'material',
property: 'color'
}
]
});
// Called by Networked-Aframe when connected to server
function onConnect() {
NAF.log.write("onConnect", new Date());
}
</script>

<script>
// On mobile remove elements that are resource heavy
var isMobile = AFRAME.utils.device.isMobile();
Expand Down

0 comments on commit 0b029a7

Please sign in to comment.