/
ownership-transfer.html
131 lines (122 loc) · 4.4 KB
/
ownership-transfer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ownership Transfer Example — Networked-Aframe</title>
<meta name="description" content="Ownership Transfer 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/2.5.0/socket.io.slim.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: [
'position',
'rotation',
{
selector: '.head',
component: 'material',
property: 'color'
}
]
});
if (!NAF.schemas.hasTemplate('#cube-template')) {
NAF.schemas.add({
template: '#cube-template',
components: [
'position',
{
selector: '.cube',
component: 'rotation'
},
{
selector: '.cube',
component: 'material',
property: 'color'
},
{
selector: '.cube',
component: 'toggle-ownership',
property: 'direction'
}
]
});
}
}
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/spawner.component.js"></script>
<script src="/js/toggle-ownership.component.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<a-scene
networked-scene="
room: dev;
debug: true;
adapter: wseasyrtc;
"
renderer="physicallyCorrectLights: true;"
>
<a-assets>
<!-- Templates -->
<!-- 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>
<!-- Cube -->
<template id="cube-template">
<a-entity>
<a-box class="cube" toggle-ownership color="#F00"></a-box>
</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="template:#cube-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 cube. Press enter to take ownership of all cubes.</p>
</div>
<script>
// Called by Networked-Aframe when connected to server
function onConnect() {
console.log('onConnect', new Date());
}
</script>
</body>
</html>