forked from arenaxr/arena-web-core
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdev.html
255 lines (212 loc) · 11.8 KB
/
dev.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="//xr.andrew.cmu.edu/conix-x.png">
<meta charset="utf-8">
<title>ARENA-DEV</title>
<meta name="description" content="Augmented Reality Edge Networking Architecture">
<!-- the AFrame script library (minified) -->
<!-- master version: cutting edge but may have bugs -->
<script src="aframe/dist/aframe-master.js"></script>
<!-- stable version; works with particles & environment (fog) -->
<!--
<script src="http://xr.andrew.cmu.edu/refactor/aframe/dist/aframe-v0.9.2.js"></script>
-->
<!-- aframe-extras gives ability to play other model formats
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
-->
<!-- from https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.js -->
<script src="vendor/aframe-extras.js"></script>
<!-- from https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.js -->
<script src="vendor/aframe-physics-system.js"></script>
<!-- thick lines - seems to have bugs
from https://rawgit.com/andreasplesch/aframe-meshline-component/master/dist/aframe-meshline-component.min.js
-->
<script src="vendor/aframe-meshline-component.js"></script>
<!-- pretty backgrounds -->
<script src="vendor/aframe-environment-component.min.js"></script>
<!-- AR.js
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
-->
<!-- our camera change and other event listener Components -->
<script src="events-ar.js"></script>
<!-- V3.1 of the Paho MQTT.js library -->
<script src="vendor/mqttws31.js" type="text/javascript"></script>
<!-- our mqtt.js (main) script
<script src="./mqtt-dev.js" type="text/javascript"></script> -->
<script src="./mqtt-er1k.js" type="text/javascript"></script>
<!-- particles dude -->
<script src="vendor/aframe-particle-system-component.min.js"></script>
<!-- from https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js -->
<script src="vendor/webxr-polyfill.js"></script>
<!-- from "https://unpkg.com/[email protected]/dist/aframe-render-order-component.js" -->
<script src="transparent-occlude.js"></script>
<!-- TO WORK WITH WebXR Viewer, uncomment below and add 'ar' component to a-scene tag e.g. "a-scene ar ..." -->
<!-- include three.ar.js; add the speech recognition polyfill if you want. -->
<!-- <script src="https://rawgit.com/google-ar/three.ar.js/master/dist/three.ar.js"></script>
<!-- include aframe-ar.
<script src="https://rawgit.com/chenzlabs/aframe-ar/master/dist/aframe-ar.js"></script>
-->
</head>
<body>
<!-- <a-scene name="MQTTScene"> -->
<a-scene physics name="MQTTScene">
<!-- background="color: black" stats physics arjs -->
<a-assets>
<a-asset-item id="Cube-obj" src="./models/Cube.obj"></a-asset-item>
<a-asset-item id="Cube-mtl" src="./models/Cube.mtl"></a-asset-item>
<!-- Vive controller 3d model -->
<a-asset-item id="viveControl-obj" src="./models/vr_controller_vive.obj"></a-asset-item>
<a-asset-item id="viveControl-mtl" src="./models/vr_controller_vive.mtl"></a-asset-item>
</a-assets>
<!-- BG music
<video id="vrvideo" autoplay loop="false" src="audio.mp4"></video>
-->
<!-- pose-publisher -->
<a-marker preset="hiro">
<a-entity id="poser" position="0 -1 0" scale="0.05 0.05 0.05"
gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf">
</a-entity>
</a-marker>
<!-- ground plane so falling objects don't fall through floor -->
<a-plane sound="poolSize: 8; src: url(audio/snd_WoodWood.ogg); on: collide" static-body position="0 -0.1 0"
id="groundPlane" collision-listener color="#FFAAEE" transparent="true" opacity=".01" height="30" width="30"
rotation="-90 0 0"></a-plane>
<!-- walls so rolling objects don't roll off edge -->
<a-box static-body position="-15 1 0" id="border1" color="#111111" transparent="true" opacity=".01"
scale="0.5 0.5 30"></a-box>
<a-box static-body position="15 1 0" id="border2" color="#111111" transparent="true" opacity=".01"
scale="0.5 0.5 30"></a-box>
<a-box static-body position="0 1 15" id="border3" color="#111111" transparent="true" opacity=".01"
scale="30 0.5 0.5"></a-box>
<a-box static-body position="0 1 -15" id="border4" color="#111111" transparent="true" opacity=".01"
scale="30 0.5 0.5"></a-box>
<!--
<a-sky radius="5000" color="#100030"></a-sky>
-->
<a-entity id="env" environment="preset: starry; groundTexture: checkerboard"></a-entity>
<!--
<a-entity position="0 2.25 -4" id="weather" particle-system="preset: snow; enabled: true"></a-entity>
-->
<a-entity position="0 0 0" id="CameraRig">
<!-- movement-controls="fly: true; speed=0.3"> -->
<a-entity position="0 0 0" id="CameraSpinner" name="PerspectiveCamera" tag="MainCamera">
<!-- this camera can 'fly': z axis follows pitch of head direction -->
<a-camera id="my-camera" far="10000" near="0.1" wasd-controls="fly: true" look-controls pose-listener>
<!--
<a-camera id="my-camera" far="10000" near="0.1" wasd-controls="fly: true" look-controls pose-listener mouse-cursor>
<a-camera id="my-camera" far="10000" near="0.1" look-controls-enabled="true" wasd-controls-enabled="true" pose-listener mouse-cursor>
<a-cursor id="mouseCursor" fuse="true" max-distance="1000" timeout="1500"></a-cursor>
<a-cursor id="mouseCursor" fuse="true" raycaster="objects:[click-listener]"></a-cursor>
-->
<a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects:[click-listener]; showLine:true">
</a-entity>
</a-camera>
</a-entity>
</a-entity>
<!-- vive-listener component (in events.js) gets all controller buttons as events -->
<!-- vive-pose-listener component (in events.js) gets controller pose in real time -->
<!-- a Vive controller
<a-entity id="viveController" visible="false" position="0 1 -2" obj-model="obj: #viveControl-obj; mtl: #viveControl-mtl"></a-entity>
-->
<a-entity vive-listener vive-pose-listener id="vive-leftHand" laser-controls="hand:left"
raycaster="objects: [click-listener]"></a-entity>
<a-entity vive-listener vive-pose-listener id="vive-rightHand" laser-controls="hand:right"
raycaster="objects: [click-listener]"></a-entity>
<!-- video example: may autoplay in Firefox, all black in Chrome :-/
<a-video src="#vrvideo" position="-3 2 -6"></a-video>
-->
<!-- test pose publisher
<a-box pose-publisher dynamic-body id="sound_box" position="0 2.5 -2" scale="0.5 0.5 0.5" color="red">
</a-box>
-->
<a-box click-listener env sound id="env_box" position="-1.5 0.5 -2" scale="0.5 0.5 0.5"
material="src: images/conix-face-white.jpg; wireframe: true">
</a-box>
<a-box attr-wireframe click-listener collision-listener
load-scene="on: mousedown; url://oz.andrew.cmu.edu/persist/drone; position: 0 0 0" position="1.5 0.5 -2"
rotation="0 0 0" scale="0.5 0.5 0.5" id="conix_box" material="src: images/conix-face-black.png">
</a-box>
<a-box position="1 0.5 -1.5" rotation="0 0 0" scale="0.5 0.5 0.5" id="trans_box" material="colorWrite: false"
render-order="0">
<!-- render-order="0" -->
</a-box>
<a-sphere pointed position="0 0.5 -2" rotation="15 15 15" scale="0.5 0.5 0.5"
animation="property: rotation; to: 0 360 0; loop:true; dur:10000; easing:linear" id="dots_sphere">
</a-sphere>
<!-- demonstrate a clickable box that prompts for input & publishes entered text over MQTT
<a-box click-listener prompt-box="on: mousedown; prompt:name_please" position="-1.5 0.5 -2" rotation="0 0 0" scale="0.5 0.5 0.5" id="conix_box" name="Box" material="src: images/conix-face-white.jpg">
</a-box>
-->
<!-- CONIX cube for debugging click events
<a-entity vive-listener click-listener position="1.5 0.5 1" rotation="0 0 0" scale="0.5 0.5 0.5" id="conix_box" name="Box" obj-model="obj: #Cube-obj; mtl: #Cube-mtl">
</a-entity>
<a-text id="conix_text" position="1.5 1.3 1" side="double" align="center" anchor="center" scale="0.8 0.8 0.8" color="#FF77FF"></a-text>
-->
<a-text id="conix_text" value="" position="0 1.3 -2" side="double" align="center" anchor="center"
scale="0.8 0.8 0.8" color="#FF77FF"></a-text>
<!-- let there be LIGHTS -->
<a-light position="-0.93 1.58 -1.14" name="PointLight 1" type="point" color="#9090AD" intensity="0.75"></a-light>
<a-light position="-0.272 0.39 1.25" name="PointLight 2" type="point" color="#C2E6C7"></a-light>
<a-light name="AmbientLight" type="ambient" color="#363942"></a-light>
<!--
<a-entity light="type: ambient; color: #BBB"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.5 1 1"></a-entity>
<a-marker pose-printer preset="hiro">
<a-box position='1 1 0' material='color: yellow;' emiteevents='true' smooth='true'></a-box>
</a-marker>
-->
</a-scene>
<script type="text/javascript">
/*
const entityEl = document.querySelector('a-marker');
const cameraRigEl = document.querySelector('#CameraRig');
const cameraEl = document.querySelector('#my-camera');
const markerPosition = new THREE.Vector3();
const markerRotation = new THREE.Quaternion();
const camRigPosition = new THREE.Vector3();
const camRotation = new THREE.Quaternion();
const origin = new THREE.Vector3();
let phoneToMarker = new THREE.Vector3();
entityEl.addEventListener('markerFound', function (event) {
entityEl.object3D.getWorldQuaternion(markerRotation);
entityEl.object3D.getWorldPosition(markerPosition);
cameraRigEl.object3D.getWorldQuaternion(camRotation);
cameraRigEl.object3D.getWorldPosition(camRigPosition);
markerRotation.conjugate();
phoneToMarker = markerPosition.sub(camRigPosition);
phoneToMarker = phoneToMarker.negate();
console.log(markerPosition, markerRotation);
cameraRigEl.object3D.position.set(phoneToMarker.x, phoneToMarker.y, phoneToMarker.z);
// cameraRigEl.object3D.rotation.set(markerRotation._x, markerRotation._y, markerRotation._z, markerRotation._w)
// entityEl.parentNode.removeChild(entityEl);
})
AFRAME.registerComponent('pose-printer', {
init: function () {
// Set up the tick throttling.
this.tick = AFRAME.utils.throttleTick(this.tick, 100, this); // ugly hack: updateMillis is a global in mqtt.js
},
tick: (function (t, dt) {
const newPosition = new THREE.Vector3();
const newRotation = new THREE.Quaternion();
this.el.object3D.getWorldQuaternion(newRotation);
this.el.object3D.getWorldPosition(newPosition);
const rotationCoords = newRotation.x + ' ' + newRotation.y + ' ' + newRotation.z + ' ' + newRotation.w;
const positionCoords = newPosition.x + ' ' + newPosition.y + ' ' + newPosition.z;
// cameraRigEl.object3D.position.set(newPosition);
const newPose = rotationCoords + " " + positionCoords;
if (this.lastPose !== newPose) {
console.log(newPosition, newRotation);
this.lastPose = newPose;
}
})
});
*/
</script>
<!-- login auth check with calls to mqtt connect placed in an `onauth` event listener -->
<script src="https://apis.google.com/js/platform.js"></script>
<script src="./defaults.js"></script>
<script src="./auth.js"></script>
</body>
</html>