How to do multiuser in A-Frame? - aframe

Question

What are the options I can incorporate multiuser into A-Frame?
Below is example code where I want the black sphere to represent each player:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
<a-sphere id="player" color="black"></a-sphere>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>

Answer 1

Multiuser is still being fleshed out as the community and the team continue to experiment. Networked physics is something that needs to be implemented well and there are a few methods from the game industry that can be ported to the Web. There are a few initial options as of time of writing:
https://github.com/haydenjameslee/networked-aframe - Networked A-Frame by Hayden Lee that uses WebRTC and a server. Here's a Glitch we can remix to get started: https://glitch.com/~networked-aframe
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
<script src="easyrtc/easyrtc.js"></script>
<script src="https://unpkg.com/networked-aframe/dist/networked-aframe.min.js"></script>
<script>
function onConnect() {
NAF.entities.createAvatar('#avatar-template', '0 1.6 0', '0 0 0');
}
</script>
<a-scene network-scene>
<a-assets>
<script id="avatar-template" type="text/html">
<a-sphere color="black"></a-sphere>
</script>
</a-assets>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
Another option is http://lance.gg/ , a real-time multiplayer game server. It provides an extendible Node.JS based server, on which game logic runs, as well as a client-side library which synchronizes the client's game state with the server game state. In order to provide a smooth visual experience for each connected client, Lance implements efficient networking methods, position interpolation and extrapolation, user input coordination, shadow objects, physics and pseudo-physical movement, automatic handling of network spikes.
An older option is https://github.com/ngokevin/kframe/tree/master/components/firebase - Firebase component using Firebase real-time database server so you don't need to host your own server.