networked-aframe
Version:
A web framework for building multi-user virtual reality experiences.
163 lines (159 loc) • 5.6 kB
HTML
<html>
<head>
<title>Networked-Aframe Examples</title>
<meta name="description" content="Collection of examples for networked-aframe" />
<style>
html {
background: #33425b;
color: #fafafa;
font-family: monospace;
font-size: 20px;
padding: 10px 20px;
}
h1 {
font-weight: 300;
}
a {
color: #fafafa;
/*display: block;*/
padding: 15px 0;
}
body > div {
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Networked-Aframe Examples</h1>
<div>
<a href="basic.html">Basic</a>
<span>Simple avatars with synced color</span>
</div>
<div>
<a href="basic-4.html">4-in-one</a>
<span>Opens the basic example 4 times on one page using iframes</span>
</div>
<div>
<a href="tracked-controllers.html">Tracked Controller Hands</a>
<span>Track VR controller hands in space, as well as natural gestures like pointing, thumbs up, etc.</span>
</div>
<div>
<a href="basic-audio.html">Positional Audio</a>
<span>Example of using positional audio with WebRTC</span>
</div>
<div>
<a href="basic-video.html">Video Streaming</a>
<span>Example of using texture video with WebRTC</span>
</div>
<div>
<a href="nametag.html">Nametags + Color Picker</a>
<span>Per-avatar nametags, that can by dynamically updated and are kept in sync. Also, change your color.</span>
</div>
<div>
<a href="basic-events.html">Basic with events</a>
<span>Example of listening to and logging NAF events</span>
</div>
<div>
<a href="ownership-transfer.html">Ownership Transfer</a>
<span>Demonstrates transfering ownership of entities</span>
</div>
<div>
<a href="basic-persistent.html">Persistent sphere</a>
<span>
Simple sphere that changes color on click. The color is synced between participants. This is an example of a
persistent entity defined in the html.
</span>
</div>
<div>
<a href="persistent-peer-to-peer.html">Spawned persistent spheres</a>
<span>
Similar to the above example but with spawned spheres. The spheres are kept in the room if there is at least one
participant remaining in the room. The persistence is done peer to peer. All spheres are lost if all
participants leave the room.
</span>
</div>
<div>
<a href="basic-multi-streams.html">Multi Streams</a>
<span>Example of using texture video with WebRTC from multiple local streams</span>
</div>
<div>
<a href="shooter-2.html">Shooter</a>
<span>Press spacebar to shoot. Example for spawning networked entities at runtime.</span>
</div>
<div>
<a href="360.html">360 Image</a>
<span>Basic example with 360 image environment</span>
</div>
<div>
<a href="webrtc.html">WebRTC</a>
<span>Basic example with WebRTC support</span>
</div>
<div>
<a href="adapter-test/">Adapter Test</a>
<span>Use this page to test new network adapters</span>
</div>
<div>
<a href="basic-chat.html">Basic Chat</a>
<span>Basic example of chat through text with name of the sender and receiver</span>
</div>
<br />
<p>
Want to help make better examples? That would be awesome!
<a
href="https://github.com/networked-aframe/networked-aframe/blob/master/CONTRIBUTING.md#join-the-community-on-slack"
target="_blank"
>Contact us on Slack</a
>.
</p>
<!-- GitHub Corner. -->
<a href="https://github.com/networked-aframe/networked-aframe" class="github-corner">
<svg
width="80"
height="80"
viewBox="0 0 250 250"
style="fill: #222; color: #fff; position: absolute; top: 0; border: 0; right: 0"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px"
class="octo-arm"
></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
></path>
</svg>
</a>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0);
}
20%,
60% {
transform: rotate(-25deg);
}
40%,
80% {
transform: rotate(10deg);
}
}
@media (max-width: 500px) {
.github-corner:hover .octo-arm {
animation: none;
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
</style>
</body>
</html>