<commit_before>
Networked A-Frame
=======

**Bringing Social VR to the Web**

Write full-featured Social VR experiences on the web, with minimal networking knowledge required.

<div>
  <a href="#features">Features</a>
  &mdash;
  <a href="#getting-started">Getting Started</a>
  &mdash;
  <a href="#more-examples">Examples</a>
  &mdash;
  <a href="#documentation">Documentation</a>
  &mdash;
  <a href="#stay-in-touch">Stay in touch</a>
</div>

Features
--------
* Includes everything you need to create multiplayer / social WebVR apps and games.
* WebRTC with no experience required. Take advantage of low-latency, peer-to-peer networking over UDP with minimal effort.
* Audio streaming to let your users talk in-app.
* Bandwidth sensitive. Only sends network updates when a synced component has changed. Option to compress network updates.
* Extendable. Sync any A-Frame component, including your own, without changing the component code at all.


Getting Started
---------------
 ```sh
git clone https://github.com/haydenjameslee/networked-aframe.git  # Clone the repository.
cd networked-aframe && npm install && npm run easyrtc-install  # Install dependencies.
npm start  # Start the local development server.
```
With the server running, browse the examples at `http://localhost:8080`. Open another browser tab and point it to the same URL to see the other client.


Basic Example
-------------
```html
<html>
  <head>
    <title>My Networked A-Frame Scene</title>
    <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="xxx/networked-aframe.min.js"></script>
    <script>
      function onConnect () {
        naf.entities.createAvatar('#avatar-template', '0 1.6 0', '0 0 0');
      }
    </script>
  </head>
  <body>
    <a-scene network-scene>
      <a-assets>
        <script id="avatar-template" type="text/html">
          <a-entity class="avatar">
            <a-box class="head"
              color="#5985ff"
              scale="0.45 0.5 0.4"
            ></a-sphere>
          </a-entity>
        </script>
      </a-assets>
    </a-scene>
  </body>
</html>
```

More Examples
-------------

Open in two tabs if nobody else is online.

#### Simple

[http://haydenlee.io/networked-aframe/basic.html](http://haydenlee.io/networked-aframe/basic.html)

#### Dance Party!

[http://haydenlee.io/networked-aframe/dance-party.html](http://haydenlee.io/networked-aframe/dance-party.html)


Documentation
-------------

### Overview

Networked A-Frame works by syncing entities and their components to all connected clients. All the connection and syncing logic happens under the hood. To connect to a room you need to add the `network-scene` component to the [A-Frame <a-scene> element](#scene-component). For an entity to be synced, you need to create a [networked entity](#creating-networked-entities). By default the `position` and `rotation` components are synced, but if you want to sync other components or child components you need to define a component schema, as explained in the [Syncing Custom Components](#syncing-custom-components) section. For more advanced control over the WebRTC datachannel see the section on [Broadcasting Custom Messages](#broadcasting-custom-messages) and [Settings](#settings).


### Scene component<commit_msg>overview revision<commit_after>
Networked A-Frame
=======

**Bringing Social VR to the Web**

Write full-featured Social VR experiences on the web, with minimal networking knowledge required.

<div>
  <a href="#features">Features</a>
  &mdash;
  <a href="#getting-started">Getting Started</a>
  &mdash;
  <a href="#more-examples">Examples</a>
  &mdash;
  <a href="#documentation">Documentation</a>
  &mdash;
  <a href="#stay-in-touch">Stay in touch</a>
</div>

Features
--------
* Includes everything you need to create multiplayer / social WebVR apps and games.
* WebRTC with no experience required. Take advantage of low-latency, peer-to-peer networking over UDP with minimal effort.
* Audio streaming to let your users talk in-app.
* Bandwidth sensitive. Only sends network updates when a synced component has changed. Option to compress network updates.
* Extendable. Sync any A-Frame component, including your own, without changing the component code at all.


Getting Started
---------------
 ```sh
git clone https://github.com/haydenjameslee/networked-aframe.git  # Clone the repository.
cd networked-aframe && npm install && npm run easyrtc-install  # Install dependencies.
npm start  # Start the local development server.
```
With the server running, browse the examples at `http://localhost:8080`. Open another browser tab and point it to the same URL to see the other client.


Basic Example
-------------
```html
<html>
  <head>
    <title>My Networked A-Frame Scene</title>
    <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="xxx/networked-aframe.min.js"></script>
    <script>
      function onConnect () {
        naf.entities.createAvatar('#avatar-template', '0 1.6 0', '0 0 0');
      }
    </script>
  </head>
  <body>
    <a-scene network-scene>
      <a-assets>
        <script id="avatar-template" type="text/html">
          <a-entity class="avatar">
            <a-box class="head"
              color="#5985ff"
              scale="0.45 0.5 0.4"
            ></a-sphere>
          </a-entity>
        </script>
      </a-assets>
    </a-scene>
  </body>
</html>
```

More Examples
-------------

Open in two tabs if nobody else is online.

#### Simple

[http://haydenlee.io/networked-aframe/basic.html](http://haydenlee.io/networked-aframe/basic.html)

#### Dance Party!

[http://haydenlee.io/networked-aframe/dance-party.html](http://haydenlee.io/networked-aframe/dance-party.html)


Documentation
-------------

### Overview

Networked A-Frame works by syncing entities and their components to other connected clients. To connect to a room you need to add the [`network-scene` component](#scene-component) to the A-Frame a-scene element. For an entity to be synced, you need to create a [networked entity](#creating-networked-entities). By default the `position` and `rotation` components are synced, but if you want to sync other components or child components you need to define a [schema](#syncing-custom-components). For more advanced control over the WebRTC datachannel see the section on [Broadcasting Custom Messages](#broadcasting-custom-messages) and [Settings](#settings).


### Scene component
{'fraction_non_alphanumeric': 0.14328004736530492, 'fraction_numerical': 0.008288928359976317, 'mean_word_length': 3.3537371134020617, 'pattern_counts': {'":': 0, '<': 84, '<?xml version=': 0, '>': 84, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6973446', 'n_tokens_mistral': 2108, 'n_tokens_neox': 1982, 'n_words': 653}