-
Notifications
You must be signed in to change notification settings - Fork 0
/
marbles.html
82 lines (74 loc) · 4.66 KB
/
marbles.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Marbles </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>
<script type="text/javascript" src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/super-hands.min.js"></script>
<script src="https://unpkg.com/aframe-physics-extras/dist/aframe-physics-extras.min.js"></script>
<script src="https://unpkg.com/aframe-mirror-component/dist/aframe-mirror-component.min.js"></script>
</head>
<body>
<a-scene physics="debug: false; gravity: -9.8; restitution: 0.9" cursor="rayOrigin: mouse">
<a-assets>
<a-mixin id="wall" class="wall" geometry="primitive: box" static-body force-pushable shadow ></a-mixin>
<a-mixin id="marble"
geometry="primitive: sphere; radius: 0.2"
dynamic-body="shape: sphere; mass: 0.5"
material="color: pink; metalness: 0.9"
>
</a-mixin>
<a-mixin id="touch"
physics-collider phase-shift
collision-filter="collisionForces: false"
static-body="shape: sphere; sphereRadius: 0.02"
super-hands="colliderEvent: collisions;
colliderEventProperty: els;
colliderEndEvent: collisions;
colliderEndEventProperty: clearedEls;"></a-mixin>
<a-mixin id="ammo"
grabbable
event-set__hoveron="_event: hover-start; material.opacity: 0.7; transparent: true"
event-set__hoveroff="_event: hover-end; material.opacity: 1; transparent: false"
shadow></a-mixin>
</a-assets>
<a-camera position="0 1.6 2"></a-camera>
<a-entity environment="preset:contact; 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" static-body visible="false"></a-box>
<!-- Walls -->
<a-entity position="0 0 2">
<!-- invisible borders -->
<a-entity mixin="wall" class="wall" visible="false" geometry="width: 6; height: 100; depth: 0.3" position="0 0 -6"></a-entity>
<a-entity mixin="wall" class="wall" visible="false" geometry="width: 7; height: 100; depth: 0.3" position="-2.5 0 -3" rotation="0 90 0"></a-entity>
<a-entity mixin="wall" class="wall" visible="false" geometry="width: 7; height: 100; depth: 0.3" position="2.5 0 -3" rotation="0 -90 0"></a-entity>
<a-entity mixin="wall" class="wall" visible="false" geometry="width: 6; height: 100; depth: 0.3" position="0 0 0"></a-entity>
<!-- visual indicators of the border -->
<a-entity mixin="wall" material="color: #EF2D5E" class="wall" geometry="width: 6; height: 0.1; depth: 0.3" position="0 0 -6"></a-entity>
<a-entity mixin="wall" material="color: #EF2D5E" class="wall" geometry="width: 7; height: 0.1; depth: 0.3" position="-2.5 0 -3" rotation="0 90 0"></a-entity>
<a-entity mixin="wall" material="color: #EF2D5E" class="wall" geometry="width: 7; height: 0.1; depth: 0.3" position="2.5 0 -3" rotation="0 -90 0"></a-entity>
<a-entity mixin="wall" material="color: #EF2D5E" class="wall" geometry="width: 6; height: 0.1; depth: 0.3" position="0 0 0"></a-entity>
</a-entity>
<a-entity collide-marble="target: marble; source: marble" class="marble ammo" mixin="ammo marble" position="0 3 -1"></a-entity>
<a-entity collide-marble="target: marble; source: marble" class="marble ammo" mixin="ammo marble" position="0.01 5 -1.01"></a-entity>
<a-entity collide-marble="target: marble; source: marble" class="marble ammo" mixin="ammo marble" position="1 4 -2.5"></a-entity>
<a-entity collide-marble="target: marble; source: marble" class="marble ammo" mixin="ammo marble" position="0 5 -1"></a-entity>
<a-entity collide-marble="target: marble; source: marble" class="marble ammo" mixin="ammo marble" position="0.1 8 1.01"></a-entity>
<a-entity collide-marble="target: marble; source: marble" class="marble ammo" mixin="ammo marble" position="2 0 -2.5"></a-entity>
<!-- VR interaction -->
<a-entity id="rhand" mixin="touch"
vive-controls="hand: right"
oculus-touch-controls="hand: right"
windows-motion-controls="hand: right">
</a-entity>
<a-entity id="lhand" mixin="touch"
vive-controls="hand: left"
oculus-touch-controls="hand: left"
windows-motion-controls="hand: left">
</a-entity>
</a-scene>
</body>
</html>