networked-aframe
Version:
A web framework for building multi-user virtual reality experiences.
138 lines (128 loc) • 5.05 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Persistent Sphere Example — Networked-Aframe</title>
<meta name="description" content="Persistent Sphere 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>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<a-scene
cursor="rayOrigin: mouse"
raycaster="objects:.raycastable"
networked-scene="
room: basic-persistent;
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"
wasd-controls
look-controls
>
<a-sphere class="head" visible="false" random-color></a-sphere>
</a-entity>
</a-entity>
<a-entity
id="sphere"
networked="template:#sphere-template;networkId:sphere;persistent:true;owner:scene"
></a-entity>
<!--
Specifying a owner that isn't a real participant is used so that the
participant joining the room won't send this entity because not the
current owner, otherwise the participant will send the default red
color to the other participants, overriding the color
defined by the current owner of the sphere in the room.
-->
<a-entity environment="preset:arches"></a-entity>
<a-entity light="type:ambient;intensity:1.0"></a-entity>
</a-scene>
<div class="controls">
<p>
Click on the sphere to change its color. The color is shared between the participants. The sphere won't be
removed if the current owner (the latest participant that clicked on the sphere) leaves the room.
</p>
</div>
<script>
// Called by Networked-Aframe when connected to server
function onConnect() {
console.log('onConnect', new Date());
}
</script>
</body>
</html>