-
Notifications
You must be signed in to change notification settings - Fork 0
/
cylinders.html
75 lines (71 loc) · 4.24 KB
/
cylinders.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Cylinders </title>
<meta name="description" content="Music in WebVR by combining A-Frame and Tone.js">
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<a-scene cursor="rayOrigin: mouse">
<a-camera position="0 1.6 2"></a-camera>
<a-entity environment="preset: yavapai; shadow: true; seed:19; lightPosition: 0.7 0.7 0.7"></a-entity>
<!-- Physics terrain ground -->
<a-box width="75" height="10" depth="75" position="0 -4.995 0" visible="false"></a-box>
<a-entity random-material geometry="primitive: dodecahedron; radius: 0.3" position="0 2 -1" play-pause></a-entity>
<a-entity>
<a-entity position="-1 0 0">
<a-cylinder material="color: pink; roughness: 0; metalness: 0" synth="source: oscillator" class="cylinder upForGrab" radius="0.2" height="1.2" position="0 0 0">
</a-cylinder>
<a-cylinder material="color: pink; roughness: 0; metalness: 0" synth="source: oscillator" class="cylinder upForGrab" radius="0.2" height="0.6" position="0.5 0 0">
</a-cylinder>
<a-cylinder material="color: pink; roughness: 0; metalness: 0" synth="source: oscillator" class="cylinder upForGrab" radius="0.2" height="0.8" position="1 0 0">
</a-cylinder>
<a-cylinder material="color: pink; roughness: 0; metalness: 0" synth="source: oscillator" class="cylinder upForGrab" radius="0.2" height="0.7" position="1.5 0 0">
</a-cylinder>
<a-cylinder material="color: pink; roughness: 0; metalness: 0" synth="source: oscillator" class="cylinder upForGrab" radius="0.2" height="1.2" position="0 0 -0.51">
</a-cylinder>
<a-cylinder material="color: pink; roughness: 0; metalness: 0" synth="source: oscillator" class="cylinder upForGrab" radius="0.2" height="0.6" position="0.5 0 -0.51">
</a-cylinder>
<a-cylinder material="color: pink; roughness: 0; metalness: 0" synth="source: oscillator" class="cylinder upForGrab" radius="0.2" height="0.8" position="1 0 -0.51">
</a-cylinder>
<a-cylinder material="color: pink; roughness: 0; metalness: 0" synth="source: oscillator" class="cylinder upForGrab" radius="0.2" height="0.7" position="1.5 0 -0.51">
</a-cylinder>
</a-entity>
<a-entity geometry="primitive: plane; height: 5" material log="channel: master" rotation="0 20 0" position="-1 0 -2" channel="master"></a-entity>
<a-entity>
<a-cylinder material="color: purple; roughness: 0; metalness: 0" synth="source: phaser" class="cylinder upForGrab" radius="0.2" height="0.5" position="0.5 0 -1">
<a-entity position="0.5 1 0" text="value: Phaser"></a-entity>
</a-cylinder>
<a-cylinder material="color: purple; roughness: 0; metalness: 0" synth="source: detune" class="cylinder upForGrab" radius="0.2" height="1" position="-0.5 0 -1">
<a-entity position="0.5 1 0" text="value: Detune"></a-entity>
</a-cylinder>
<a-cylinder material="color: purple; roughness: 0; metalness: 0" synth="source: volume" class="cylinder upForGrab" radius="0.2" height="1" position="0 0 -1.5">
<a-entity position="0.5 1 0" text="value: Volume"></a-entity>
</a-cylinder>
<a-cylinder material="color: purple; roughness: 0; metalness: 0" synth="source: pingPong" class="cylinder upForGrab" radius="0.2" height="1" position="1 0 -1.5">
<a-entity position="0.5 1 0" text="value: Delay"></a-entity>
</a-cylinder>
</a-entity>
</a-entity>
<!-- VR interaction -->
<a-entity id="rhand"
vive-controls="hand: right"
oculus-touch-controls="hand: right"
windows-motion-controls="hand: right"
aabb-collider="objects: .upForGrab;"
grab-vertical="heightRange: 0.5 3"
>
</a-entity>
<a-entity id="lhand"
vive-controls="hand: left"
oculus-touch-controls="hand: left"
windows-motion-controls="hand: left"
aabb-collider="objects: .upForGrab;"
grab-vertical="heightRange: 0.5 3"
>
</a-entity>
</a-scene>
</body>
</html>