Comments (10)
Done! Check it out: https://github.com/haydenjameslee/networked-aframe/blob/master/docs/hosting-networked-aframe-on-a-server.md
from networked-aframe.
Planning on doing a post like this with a variety of platforms. In the meantime check out glitch: https://glitch.com/~networked-aframe
You can 'remix' that project which lets you host and control an instance on their servers.
from networked-aframe.
Hey @haydenjameslee just trying your glitch example out at https://networked-aframe.glitch.me/ on Chrome and it doesn't seem to connect to the node.js server. Works fine in Firefox though.
from networked-aframe.
Its working for me. Could you post logs?
from networked-aframe.
Here are the logs from Chrome.
First Tab:
A-Frame Version: 0.5.0 (Date 10-02-2017, Commit #110055d)
index.js:74 three Version: ^0.83.0
index.js:75 WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
browser.js:117 core:propertyTypes:warn `src` property type is deprecated. Use `asset` instead. +0ms
three.js:19590 THREE.WebGLRenderer 83
networked-aframe.min.js:2 Networked-Aframe Connecting...
networked-aframe.min.js:2 Networked-Aframe Client ID: 6eDrrDyhu0ARBEDH
networked-aframe.min.js:2 Created network entity s0lrdjm
networked-aframe.min.js:1 <a-entity class="avatar">
<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>
<a-entity class="gun">
<a-box
position="0.51 -0.13 -0.29"
scale="0.19 0.23 0.67"
color="#000"
></a-box>
<a-entity class="gun-tip"
position="0.51 -0.10 -0.64"
></a-entity>
</a-entity>
</a-entity>
networked-aframe.min.js:1 Object__proto__: Objectconstructor: function Object()hasOwnProperty: function hasOwnProperty()isPrototypeOf: function isPrototypeOf()propertyIsEnumerable: function propertyIsEnumerable()toLocaleString: function toLocaleString()toString: function toString()valueOf: function valueOf()__defineGetter__: function __defineGetter__()__defineSetter__: function __defineSetter__()__lookupGetter__: function __lookupGetter__()__lookupSetter__: function __lookupSetter__()get __proto__: function __proto__()set __proto__: function __proto__()
/favicon.ico Failed to load resource: the server responded with a status of 404 ()
Second Tab:
A-Frame Version: 0.5.0 (Date 10-02-2017, Commit #110055d)
index.js:74 three Version: ^0.83.0
index.js:75 WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
browser.js:117 core:propertyTypes:warn `src` property type is deprecated. Use `asset` instead. +0ms
three.js:19590 THREE.WebGLRenderer 83
networked-aframe.min.js:2 Networked-Aframe Connecting...
networked-aframe.min.js:2 Networked-Aframe Client ID: EiHwrGtxUFdGTKwu
networked-aframe.min.js:2 Created network entity m79bgqh
networked-aframe.min.js:1 <a-entity class="avatar">
<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>
<a-entity class="gun">
<a-box
position="0.51 -0.13 -0.29"
scale="0.19 0.23 0.67"
color="#000"
></a-box>
<a-entity class="gun-tip"
position="0.51 -0.10 -0.64"
></a-entity>
</a-entity>
</a-entity>
networked-aframe.min.js:1 Object
from networked-aframe.
I made a newb friendly boilerplate that'll get you up and running super quickly:
https://github.com/caseyyee/aframe-multiuser-boilerplate
It's deployable to heroku by simply following the instructions when you create a new app. You can also follow the CLI instructions here: https://devcenter.heroku.com/articles/git
I have it deployed here:
http://aframe-multiuser-boilerplate.herokuapp.com/
Hopefully this helps!
from networked-aframe.
You're a legend @caseyyee!
from networked-aframe.
Naw, thank you for a great component :)
from networked-aframe.
Here is the example with broadcastData/subscribeToDataChannel added and testable here to send and here to receive, messages in the console.
from networked-aframe.
thank you !!
from networked-aframe.
Related Issues (20)
- Disconnecting when going to a new browser Tab after some time. HOT 13
- Nametag: Not a issue but a question. HOT 2
- Be in networked aframe but not be there? HOT 4
- didn't manage to get hand tracking working HOT 5
- User in new position with each refresh?
- Add ability to add networked entity to non-networked parent HOT 7
- Share Screen Issue HOT 1
- stuck with npm i on a RPi Zero HOT 5
- Write a "how it works" documentation HOT 12
- Not a issue but really need some help. Trying to add pre-text pharses above the character. HOT 1
- networked-video-source should respect the video aspect ratio HOT 1
- Create a web component to show connected users HOT 10
- [networked-audio-zone] Private audio zone HOT 1
- https for audio? HOT 1
- Audio chat example low volume? HOT 10
- Deactivate synchronization for child nodes? HOT 9
- Deletion of a component in the NAF schema is not replicated HOT 2
- Updated state not being replicated to new joiners to a scene HOT 2
- Fix networked-video-source has a bad color space with a-frame v1.5.0
- networked-hand-controls issues with aframe-v1.5.0 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from networked-aframe.