-
Notifications
You must be signed in to change notification settings - Fork 4
/
AFrameDemo.html
90 lines (81 loc) · 4.41 KB
/
AFrameDemo.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CGPP VR HomePage</title>
<meta name="description" content="CGPP VR HomePage">
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-text-component.min.js"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script type="text/javascript">
AFRAME.registerComponent('open-url', {
schema : {
on: {type: 'string'},
src: {type: 'string'}
},
init: function() {
var data = this.data;
this.el.addEventListener(data.on, function() {
window.location.href = data.src;
});
}
});
</script>
<!-- Image link template to be reused. -->
<script id="link" type="text/html">
<a-entity class="link"
geometry="primitive: plane; height: 4; width: 4"
material="shader: flat; side: double; src: ${thumb}"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1"
open-url="on: click; src: ${src}"
sound="on: click; src: #click-sound"></a-entity>
</script>
</head>
<body>
<a-scene >
<a-assets>
<img id="skyTexture" src="WebAssets/images/360Desert.jpg">
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<!-- <img id="skyTexture" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg"> -->
<a-asset-item id="optimerBoldFont" src="https://rawgit.com/mrdoob/three.js/dev/examples/fonts/optimer_bold.typeface.json"></a-asset-item>
<img id="img8" src="WebAssets/images/8.png">
<img id="img7" src="WebAssets/images/7.png">
<img id="img6" src="WebAssets/images/6.png">
<img id="img5" src="WebAssets/images/5.png">
<img id="img4" src="WebAssets/images/4.png">
<img id="img3" src="WebAssets/images/3.png">
<img id="img2" src="WebAssets/images/2.png">
<img id="img1" src="WebAssets/images/1.png">
</a-assets>
<a-entity text="text: Computer Graphics and Pretty Pictures" position="-11 5 -18" scale="2 2 1"></a-entity>
<!-- box, circle, cube, dodecahedron, line, pyramid -->
<a-entity id="links" layout="type: line; margin: 5" position="-20 -1 -20">
<a-entity template="src: #link" data-src="week1_w17/AudioStarterKit2.html" data-thumb="#img8"></a-entity>
<a-entity template="src: #link" data-src="Volumetric.html" data-thumb="#img7"></a-entity>
<a-entity template="src: #link" data-src="#Fire-and-Water.html" data-thumb="#img6"></a-entity>
<a-entity template="src: #link" data-src="Shaders-FractalTorus.html" data-thumb="#img5"></a-entity>
<a-entity template="src: #link" data-src="Shaders-Torus.html" data-thumb="#img4"></a-entity>
<a-entity template="src: #link" data-src="Project2b-Simple-Controls.html" data-thumb="#img3"></a-entity>
<a-entity template="src: #link" data-src="Project2a-Multiple-Objects.html" data-thumb="#img2"></a-entity>
<a-entity template="src: #link" data-src="Project1-Lighting.html" data-thumb="#img1"></a-entity>
</a-entity>
<a-entity class="link" rotation="90 0 0" position="0 -5 0" geometry="primitive : plane; height : 100; width : 100" material="opacity : 0.28; side : double; color : #000000;"></a-entity>
<a-sky src="#skyTexture"></a-sky>
<a-entity camera look-controls wasd-controls>
<a-cursor id="cursor"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: springgreen"
event-set__2="_event: mouseleave; color: black"
raycaster="objects: .link">
</a-cursor>
</a-entity>
</a-scene>
</body>
</html>