-
Notifications
You must be signed in to change notification settings - Fork 19
/
house-viewer.html.bak
130 lines (93 loc) · 2.89 KB
/
house-viewer.html.bak
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
<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>