-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·169 lines (146 loc) · 6.27 KB
/
index.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
<html>
<head>
<title>Theater Disaster</title>
<meta name="description" content="Panoramas and Cursors">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="resources/aframe.js"></script>
<script src="resources/argon.min.js"></script>
<script src="resources/aframe-particle-system-component.min.js"></script>
<script src="resources/build.js"></script>
<script src="resources/CSS3DArgonRenderer.js"></script>
<script src="resources/CSS3DArgonHUD.js"></script>
<script src="resources/aframe-look-at-component.js"></script>
<script src="https://rawgit.com/protyze/aframe-alongpath-component/master/dist/aframe-alongpath-component.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/style.css">
</head>
<body>
<div id="menu" class="menu"></div>
<ar-scene desiredreality="src:url(resources/reality/panorama/index.html);" panorama__trainyard="src:url(trainyard.jpg);lla:-84.3951 33.7634 206;initial:true;">
<a-assets>
<a-asset-item id="theater-obj" src="Theatre Whole.obj"></a-asset-item>
<a-asset-item id="theater-mtl" src="Theatre Whole.mtl"></a-asset-item>
<a-asset-item id="train-obj" src="trainengine.obj"></a-asset-item>
<a-asset-item id="train-mtl" src="trainengine.mtl"></a-asset-item>
<a-asset-item id="theaterCrash-obj" src="Theatre Crash.obj"></a-asset-item>
<a-asset-item id="theaterCrash-mtl" src="Theatre Crash.mtl"></a-asset-item>
<video id="train-video" autoplay loop="true" src="train-video.mp4" playsinline></video>
</a-assets>
<a-entity id="theaterworld" position="0 0 0" referenceframe='parent: ar.user; userotation: false'>
<a-obj-model src="#theater-obj" mtl="#theater-mtl" rotation="-90 -30 0" scale="1 1 1" position="7 -17 -5">
</a-obj-model>
<a-video src="#train-video" width="57.6" height="32.4" rotation="0 -30 0" position="35 7 -50"></a-video>
<a-animation
attribute="visible"
id="theaterGone"
delay="15500"
to="false"
begin= "four"
></a-animation>
</a-entity>
<a-entity>
<!-- <a-box id="train" position="10 0.5 30" rotation="0 45 0" width="10" height="10" depth="10" color="#4CC3D9"></a-box> -->
<a-obj-model id="train" src="#train-obj" rotation="-90 0 40" scale="0.4 0.4 0.4" position="25 -2 -75">
</a-obj-model>
<a-animation
id="trainAnimation"
attribute="position"
easing= "ease-out-expo"
delay="4125"
from= "1005 -2 -975"
to="-70 -2 100"
dur="21000"
begin= "one"
></a-animation>
</a-entity>
<a-entity visible="false">
<a-obj-model id="trainHole" src="#theaterCrash-obj" mtl="#theaterCrash-mtl" rotation="-90 -30 0" scale="2 2 2" position="-19 -32 62">
</a-obj-model>
<a-animation
attribute="visible"
id="trainHoleAnimation"
delay="11750"
to="true"
begin= "two"
></a-animation>
<a-animation
attribute="visible"
id="trainHoleAnimation2"
delay="15500"
to="false"
begin= "three"
></a-animation>
</a-entity>
</ar-scene>
<script>
var panoramas = [
{ text: 'Trainyard', name: 'trainyard' },
{ text: 'Nemo', name: 'aqui-nemo' }
];
var arScene = document.querySelector('ar-scene');
var train = document.querySelector("#train");
var content = document.querySelector('#theaterworld');
var hole = document.querySelector('#trainHole');
// the ar-camera has an argon reference frame attached, so when it gets its first value,
// we'll get this event
arScene.addEventListener("referenceframe-statuschanged", function () {
var camera = document.querySelector('ar-camera');
var vec = camera.object3D.getWorldDirection();
vec.multiplyScalar(-10);
vec.y -= 1;
content.setAttribute("position", {x: vec.x, y: vec.y, z: vec.z});
});
// train.on('click', animate);
// function animate () {
// var train = d3.select(this);
// train.transition()
// .duration(2000)
// .ease('linear')
// .attrTween('position', function() {
// return d3.interpolate('0 0.5 -2', '0 0.5 10')
// })
// }
// get the menu element
var menu = document.getElementById('menu');
var button = document.createElement('button');
button.textContent = "Play Video" ;
menu.appendChild(button);
button.addEventListener('click', function () {
const videoElement = document.querySelector("#train-video");
videoElement.play();
train.emit('one');
hole.emit('two');
hole.emit('three');
content.emit('four');
// arScene.sceneEl.emit('showpanorama', { name: panoramas[0].name });
// content.setAttribute('visible', false);
// hole.aet
});
AFRAME.registerComponent('cursor-listener', {
init: function () {
this.el.addEventListener('click', function (evt) {
//arScene.sceneEl.emit('showpanorama', { name: panoramas[1].name });
this.setAttribute('visible', false);
console.log('I was clicked at: ', evt.detail.intersection.point);
});
this.video_el = document.querySelector(this.video_selector);
this.el.addEventListener('mouseenter', function (evt) {
this.setAttribute('material', 'opacity', 0.5);
});
this.el.addEventListener('mouseleave', function (evt) {
this.setAttribute('material', 'opacity', 1.0);
});
}
});
arScene.addEventListener('argon-initialized', function(evt) {
arScene.sceneEl.hud.appendChild(menu);
arScene.sceneEl.argonApp.focusEvent.addEventListener(function () {
document.getElementById('menu').style.display = 'block';
});
arScene.sceneEl.argonApp.blurEvent.addEventListener(function () {
document.getElementById('menu').style.display = 'none';
});
});
</script>
</body>
</html>