-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
110 lines (102 loc) · 2.88 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>A-Frame Ball Throw</title>
<meta name="description" content="A-Frame Ball Throw" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<!-- Moon gravity -->
<a-scene physics="gravity: -1.6" renderer="antialias: true">
<!-- Player -->
<a-entity camera look-controls wasd-controls></a-entity>
<a-entity
id="leftController"
static-body="shape: sphere; sphereRadius: 0.02;"
vive-controls="hand: left"
sphere-collider="objects: .throwable"
grab
></a-entity>
<a-entity
id="rightController"
static-body="shape: sphere; sphereRadius: 0.02;"
vive-controls="hand: right"
sphere-collider="objects: .throwable"
grab
></a-entity>
<!-- Ammo -->
<a-sphere
class="throwable"
dynamic-body
position="0 0.25 -0.5"
radius="0.10"
color="green"
></a-sphere>
<a-sphere
class="throwable"
dynamic-body
position="0.25 0.25 -0.5"
radius="0.10"
color="green"
></a-sphere>
<a-sphere
class="throwable"
dynamic-body
position="-0.25 0.25 -0.5"
radius="0.10"
color="green"
></a-sphere>
<!--Table to hold the targets -->
<a-box
static-body
position="2 1 0"
width="2"
height="0.1"
depth="2"
color="grey"
></a-box>
<!-- The targets (will be generated with D3) -->
<a-entity id="boxes"></a-entity>
<!-- Ground -->
<a-plane
static-body
rotation="-90 0 0"
width="10"
height="10"
color="black"
></a-plane>
<!-- Sky -->
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
<script>
const colorScale = d3.scaleSequential(d3.interpolatePlasma);
const dataset = [];
for (let i = 10; i > 0; i--) {
dataset.push(i);
}
let boxes = d3.select('#boxes');
boxes.selectAll('a-box')
.data(dataset)
.enter()
.append('a-box')
.attr('height', '0.1')
.attr('width', function(d, i) {
return String(0.1 * d);
})
.attr('depth', function(d, i) {
return String(0.1 * d);
})
.attr('color', function(d, i) {
return colorScale(i / 10);
})
.attr('position', function(d, i) {
return '2 ' + (i * 0.1 + 1.1) + ' 0';
})
.attr('dynamic-body', '');
</script>
</html>