networked-aframe
Version:
A web framework for building multi-user virtual reality experiences.
137 lines (128 loc) • 5.08 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Spawned Persistent Spheres Example — Networked-Aframe</title>
<meta name="description" content="Spawned Persistent Spheres Example — Networked-Aframe" />
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
<script src="/easyrtc/easyrtc.js"></script>
<script src="/dist/networked-aframe.js"></script>
<script>
// see issue https://github.com/networked-aframe/networked-aframe/issues/267
NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
NAF.schemas.getComponents = (template) => {
if (!NAF.schemas.hasTemplate('#avatar-template')) {
NAF.schemas.add({
template: '#avatar-template',
components: [
{
component: 'position',
requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)
},
{
component: 'rotation',
requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)
},
{
selector: '.head',
component: 'material',
property: 'color'
}
]
});
}
if (!NAF.schemas.hasTemplate('#sphere-template')) {
NAF.schemas.add({
template: '#sphere-template',
components: [
'position',
{
component: 'material',
property: 'color'
}
]
});
}
const components = NAF.schemas.getComponentsOriginal(template);
return components;
};
</script>
<script src="https://cdn.jsdelivr.net/npm/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-environment-component@1.3.7/dist/aframe-environment-component.min.js"></script>
<script src="/js/spawn-in-circle.component.js"></script>
<script src="/js/color-changer.component.js"></script>
<script src="/js/spawner-persistent.component.js"></script>
<script src="/js/persistent-p2p.component.js"></script>
<!--
The spawner-persistent and persistent-p2p components go together,
spawner-persistent is set on the player entity,
persistent-p2p on the a-scene entity.
The persistent-p2p component handle the logic of keeping the persistent entities peer to peer.
The spheres are kept in the room if there is at least one participant remaining in the room.
-->
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<a-scene
cursor="rayOrigin: mouse"
raycaster="objects:.raycastable"
persistent-p2p
networked-scene="
room: persistent-peer-to-peer;
debug: true;
adapter: wseasyrtc"
renderer="physicallyCorrectLights: true;"
>
<a-assets>
<!-- Templates -->
<template id="sphere-template">
<a-entity class="raycastable" geometry="primitive: sphere" material="color: red" color-changer></a-entity>
</template>
<!-- Avatar -->
<template id="avatar-template">
<a-entity class="avatar">
<a-sphere class="head" scale="0.45 0.5 0.4"></a-sphere>
<a-entity class="face" position="0 0.05 0">
<a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
<a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
<a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
</a-sphere>
</a-entity>
</a-entity>
</template>
<!-- /Templates -->
</a-assets>
<a-entity id="rig">
<a-entity
id="player"
networked="template:#avatar-template;attachTemplateToLocal:false;"
camera
position="0 1.6 0"
spawn-in-circle="radius:3"
spawner-persistent="template:#sphere-template"
wasd-controls
look-controls
>
<a-sphere class="head" visible="false" random-color></a-sphere>
</a-entity>
</a-entity>
<a-entity environment="preset:arches"></a-entity>
<a-entity light="type:ambient;intensity:1.0"></a-entity>
</a-scene>
<div class="controls">
<p>
Press space to spawn a sphere that will persist even if you leave the room at the condition there is a
participant that stay in the room.
</p>
</div>
<script>
// Called by Networked-Aframe when connected to server
function onConnect() {
console.log('onConnect', new Date());
}
</script>
</body>
</html>