How to make multiplayer in A-Frame?
What options can I enable multiplayer in A-Frame?
Below is a sample code where I want a 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>
source to share
Multiplayer is still shaping up as a community and the team continues to experiment. Networked physics is something to do well, and there are several techniques from the gaming industry that can be ported to the Internet. At the time of this writing, there are several initial options:
https://github.com/haydenjameslee/networked-aframe - Networked A-Frame from Hayden Lee that uses WebRTC and server. Here's the 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 extensible Node.JS-based server that runs the game logic, as well as a client-side library that synchronizes the state of the client game with the state of the server game. To ensure a smooth visual experience for each connected client, Lance implements efficient network techniques, location interpolation and extrapolation, user input coordination, shadow objects, physics and pseudo-physical movement, automatic processing of network peaks.
Older option https://github.com/ngokevin/kframe/tree/master/components/firebase is a Firebase component using a Firebase live database server, so you don't need to host your own server.
source to share