Networked-aframe Server Setup

Networked-Aframe (NAF) is an open-source framework for creating multi-user virtual reality experiences on the web using A-Frame. It's built on top of WebRTC and WebSocket and provides an easy-to-use API to synchronize state between users.

This is a basic tutorial on setting up a simple server that supports multi-user VR scene using Networked-Aframe.

Setting up the Server

Networked-Aframe needs a server to manage connections and sync data. You can run a local server for development purposes using Node.js. Here are the steps to set it up:

The server should now be running at localhost.

Create an HTML file for your VR Scene

Now that your server is up and running, let's create a simple VR scene. Create an index.html and include A-Frame and the networked-aframe scripts:

<!DOCTYPE html>

<html>

<head>

  <script src="<https://aframe.io/releases/1.2.0/aframe.min.js>"></script>

  <script src="<https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js>"></script>

  <script src="<https://unpkg.com/networked-aframe/dist/networked-aframe.min.js>"></script>

</head>

<body>

  <a-scene>

    <!-- your code goes here -->

  </a-scene>

</body>

</html>

Set up Networked-Aframe

Inside the a-scene tag, add a networked-scene tag to initialize Networked-Aframe. This tag includes the server's address and an adapter for connecting to the server:

<a-scene>

  <a-assets>

    <!-- your assets go here -->

  </a-assets>


  <networked-scene

    room="myroom"

    adapter="webrtc"

    audio="true"

    serverURL="<https://localhost:8080>">

  </networked-scene>

</a-scene>

In the networked-scene tag, the room attribute is used to specify the name of the virtual room that users will join. The adapter attribute is used to specify the type of connection to the server (in this case, WebRTC). The audio attribute is used to enable or disable voice chat. The serverURL attribute is the address of the server we set up earlier.

Step 4: Add Networked Entities

Now, let's add a networked entity to the scene. Networked entities are automatically synced across all connected users. Here's an example of a networked box:

<a-scene>

  <!-- ... -->


  <networked-scene>

    <a-box

      id="box"

      color="blue"

      networked="template:#box-template;attachTemplateToLocal:false"

      position="0 0.5 -3">

    </a-box>

  </networked-scene>

</a-scene>


In the a-box tag, the networked attribute is used to specify that this box is a networked entity. The template value should be the ID of a template element that defines what the box looks like for remote users. The attachTemplateToLocal value is used to specify whether the template should also be applied to the local user's view of the box.

Create a Template for Remote Users

Finally, let's create a template for what the box looks like for remote users. Add this inside the a-assets tag:

<a-scene>

  <a-assets>

    <template id="box-template">

      <a-entity>

        <a-box color="red"></a-box>

      </a-entity>

    </template>

  </a-assets>


  <!-- ... -->

</a-scene>

Now, when a user connects to the room, they will see a blue box (since attachTemplateToLocal is set to false), and all other connected users will see a red box.

Add a Horizon (ground)

You can use this image to add a horizon in the space to test the direction of the avatar when moving your head.

<a-assets>

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

</a-assets>

Then in your scene, add an 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>