-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
executable file
·107 lines (89 loc) · 5.64 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
<html>
<head>
<title>Music</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="./components/beginPanel/BeginPanel.css">
<script src="./dist/build.js"></script>
</head>
<body>
<a-scene antialias="true">
<a-assets>
<a-mixin id="bar" geometry="primitive: box" material="color: black;opacity:0.5;"></a-mixin>
<a-mixin id="fire" fire="analyserEl: #analyser;"></a-mixin>
<audio id="song" loop src="assets/audio/锦里.mp3"></audio>
<img id="play_button" src="assets/images/play.png">
<img id="pause_button" src="assets/images/pause.png">
<img id="floor" src="assets/images/floor.jpg">
<img id="skyBox" src="assets/images/sky.jpg">
</a-assets>
<!-- Camera -->
<a-entity id='camera' camera="userHeight: 1.6;" look-controls wasd-controls="enabled:true;" position="0 0 1.5" rotation='20 0 0'>
<a-entity raycaster="objects: .clickable" cursor="fuse: true; fuseTimeout: 500" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat"></a-entity>
</a-entity>
<!-- Menu -->
<a-entity menu="analyserEl: #analyser; camera:#camera" position="0 2 -2" scale="0.75 0.75 1" id="menu" class="clickable">
<a-animation begin="shrink" attribute="position" to="0 1.8 -2" dur="1000" easing="ease-out"></a-animation>
<a-animation begin="shrink" attribute="scale" to="0.5 0.5 1" dur="1000" easing="ease-out"></a-animation>
<a-animation begin="grow" attribute="position" to="0 2 -2" dur="2000" easing="ease-out"></a-animation>
<a-animation begin="grow" attribute="scale" to="0.75 0.75 1" dur="2000" easing="ease-out"></a-animation>
</a-entity>
<!-- Play button -->
<a-entity class="clickable" playbutton="analyserEl: #analyser;playing:true; visible: true" position="0 1 -2" id="playButton"
animate="attribute:scale; time:100;" rotation="90 0 0">
<a-entity>
<a-plane src="#pause_button" material="transparent: true" scale="0.9 0.9 0.9" position="0 0.52 0" rotation="-90 0 0"></a-plane>
<a-circle class="selectable" material="color: white; shader: flat;" rotation="-90 0 0">
<a-animation begin="mouseenter" attribute="material.color" to="rgb(100, 100, 100)" dur="0"></a-animation>
<a-animation begin="mouseleave" attribute="material.color" to="white" dur="0"></a-animation>
</a-circle>
<a-cylinder material="color: rgb(80, 80, 80); shader: flat;" position="0 -0.52 0" rotation="0 0 0">
</a-cylinder>
<a-animation begin="mousedown" attribute="scale" to="1 0.5 1" dur="1000"></a-animation>
<a-animation begin="mousedown" attribute="position" to="0 -0.5 0" dur="1000"></a-animation>
<a-animation begin="mouseup" attribute="scale" to="1 1 1" dur="1000"></a-animation>
<a-animation begin="mouseup" attribute="position" to="0 0 0" dur="1000"></a-animation>
</a-entity>
</a-entity>
<!-- Analyser -->
<a-entity id="analyser" audioanalyser="src: #song"></a-entity>
<!-- Wave -->
<a-entity waveform="analyserEl: #analyser; skyFlag:true;radius: 0.5" rotation="90 0 0"></a-entity>
<a-entity waveform="analyserEl: #analyser; radius: 0.5" rotation="90 0 0" position="0 1 0"></a-entity>
<!-- Spectrum visualization. -->
<a-entity levels-scale="analyserEl: #analyser; max: 50; multiplier: 0.06" entity-generator="mixin: bar;"
layout="type: circle; radius: 20" rotation="0 180 0"></a-entity>
<!-- BallLight -->
<a-entity ball-light="analyserEl: #analyser; camera:#camera; ballCount:10; max: 9;multiplier: 10" position="0,-2,0"></a-entity>
<!-- BeatParicle -->
<a-entity id="beatParticle" beat-paricle="analyserEl: #analyser;" rotation="90 0 0" position="0 10 0"></a-entity>
<!-- BigBeat -->
<a-entity id="bigBeat" big-beat="analyserEl: #analyser;" rotation="0 0 0" position="0 2 0"></a-entity>
<!-- fireEffect -->
<a-entity entity-generator="mixin: fire; num: 12" layout="type: circle; radius: 22" rotation="0 0 0"></a-entity>
<!-- <a-entity id="fire" fire="analyserEl: #analyser;" rotation="0 0 0" position="0 1 0"></a-entity> -->
<!-- EyesDraw -->
<a-entity id="eyesDraw" eyes-draw="analyserEl: #analyser;camera:#camera;rightClickFlag:false"></a-entity>
<!-- Lights, sky, ground. -->
<a-light type="ambient" position="0 0.5 0"></a-light>
<a-sky src="#skyBox"></a-sky>
<a-entity id="ground" geometry="primitive: circle; radius: 40" rotation="-90 0 0" material="src: #floor"></a-entity>
<!-- Env. -->
<!-- <a-entity snow-env="analyserEl: #analyser;"></a-entity> -->
</a-scene>
<!-- Begin Panel -->
<div id="beginPanel">
<span style="font-size: 5rem;margin-top: 5rem;flex:auto">WebVR</span>
<span style="font-size: 6rem;flex:auto;white-space: nowrap;">Audio Visualizer</span>
<span style="font-size: 2rem;flex:auto;white-space: nowrap;">WASD/ArrowKeys control movement.Focus dont move to trigger selection</span>
<div class="wrapper" id="wrapper" style="flex:auto;">
<label class="button" for="file">
Choose a local music
<input id="file" type="file">
</label>
<label class="button" id="beginBtn">Use sample music</label>
<label class="button" id="singBtn">Just Singing!</label>
</div>
</div>
</body>
</html>