-
Notifications
You must be signed in to change notification settings - Fork 19
/
house-viewer.html
128 lines (93 loc) · 2.89 KB
/
house-viewer.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
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script src="https://aframe.io/aframe/dist/aframe-master.min.js"></script>
<script src="https://cdn.rawgit.com/chrisveness/latlon-geohash/53c3d474/latlon-geohash.js"></script>
<script src="components.js"></script>
<script>
var house_models = [];
function ce(t,a){ var f = document.createElement(t); for(var k in a) f.setAttribute(k, a[k]); return f; }
function load_houses(d){
house_models = d;
if(!d || !d.length) return;
for(var v=0; v<d.length; v++){
var o = ce(
'option',
{
'value': v,
}
);
o.innerText = decodeURIComponent(d[v].match(/\/([^\/]+)\/[^\/]+$/)[1]);
house_selector.appendChild( o );
}
}
function put_house(i){
if(typeof(house_models[i]) == 'undefined' || !house_models[i]) return;
var id = 'house_'+i;
if(document.getElementById(id)) return;
var
camera = document.getElementById('camera'),
compassRotation = camera.components['compass-rotation'],
gpsPosition = camera.components['gps-position']
;
var attr = {
'id': id,
'src': house_models[i],
'gps-place': 'latitude: '+gpsPosition.crd.latitude+'; longitude: '+gpsPosition.crd.longitude,
'rotation': '0 '+parseInt(compassRotation.heading)+' 0',
'transparent-texture': ''
};
console.log('add house:', attr);
houses.appendChild( ce(
'a-collada-model',
attr
) );
}
window.onload = function(){
var
camera = document.getElementById('camera'),
compassRotation = camera.components['compass-rotation'],
gpsPosition = camera.components['gps-position']
;
document.head.appendChild(ce('script', {
src: 'https://yaglov.ru/cadastre/house_models.php?callback=load_houses'
}));
camera.addEventListener('componentchanged', function (evt) {
switch(evt.detail.name){
case 'rotation':
break;
case 'position':
//if(gpsPosition.crd)
controls.style.display = 'block';
break;
}
});
};
</script>
</head>
<body style='margin: 0px; overflow: hidden;'>
<div id="controls" style="display: none; position: fixed; top: 10px; width:100%; text-align: center; z-index: 1; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;">
<div>
<select id="house_selector">
<!--
<option value="0"></option>
-->
</select>
<button id="put_button" onclick="put_house(document.getElementById('house_selector').value); return false;">put</button>
</div>
</div>
<a-scene embedded artoolkit='sourceType: webcam;'><!-- -->
<a-camera id="camera" user-height="1.6" gps-position compass-rotation><!-- --></a-camera>
<a-entity id="houses">
<!--
<a-collada-model
id="house"
src="https://yaglov.ru/cadastre/house_models/A_J_ARB+-+1930%27s+Detached+House/model.dae"
gps-place="longitude: 55.153633; latitude: 37.469895"
transparent-texture>
-->
</a-entity>
</a-scene>
</body>
</html>