forked from mflux/aframe-datguivr
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
145 lines (131 loc) · 3.91 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AFrame Dat-GUI Experiment</title>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="datguivr.js"></script>
<script defer src="datguivr-aframe.js"></script>
</head>
<body>
<a-scene>
<a-box
position="-1 0.5 -3"
rotation="0 45 0"
color="#4CC3D9"
></a-box>
<a-sphere
position="0 1.25 -5"
radius="1"
color="#EF2D5E"
material="transparent:true; opacity: 0.5"
wireframe="true"
></a-sphere>
<a-cylinder
position="1 0.75 -3"
radius="0.5"
height="1.5"
color="#FFC65D"
></a-cylinder>
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="4"
height="4"
color="#7BC8A4"
></a-plane>
<a-datgui position="1 2.5 -2.5" rotation="0 -20 0" name="settings">
<a-gui-slider
id="widthControl"
name="width"
step="0.01"
min="1"
max="4"
></a-gui-slider>
<a-gui-slider
id="heightControl"
name="height"
step="0.01"
min="1"
max="4"
></a-gui-slider>
<a-gui-slider
id="depthControl"
name="depth"
step="0.01"
min="1"
max="4"
></a-gui-slider>
<a-gui-button name="button1"></a-gui-button>
<a-gui-button name="button 2"></a-gui-button>
<a-gui-checkbox
id="wireframe"
name="wireframe"
default="true"
></a-gui-checkbox>
<a-gui-checkbox
id="translucent"
name="translucent"
default="true"
></a-gui-checkbox>
</a-datgui>
</a-scene>
<script>
// log all mouseclicks
document.querySelectorAll("a-gui-button").forEach((el) =>
el.addEventListener("onClicked", function (evt) {
let name = evt.target.getAttribute("name");
console.log("Button", name, "clicked");
})
);
// log all slider and checkbox changes
document.querySelectorAll("a-gui-slider, a-gui-checkbox").forEach((el) =>
el.addEventListener("onChanged", (evt) => {
let name = evt.target.getAttribute("name");
let value = evt.detail.value;
console.log(name, value);
})
);
// change depth of the sphere
document
.querySelector("#depthControl")
.addEventListener("onChanged", (evt) => {
// modify Three.js object
let object = document.querySelector("a-sphere").object3D;
object.scale.z = evt.detail.value;
});
// change width of the sphere
document
.querySelector("#widthControl")
.addEventListener("onChanged", (evt) => {
// modify Three.js object
let object = document.querySelector("a-sphere").object3D;
object.scale.x = evt.detail.value;
});
// change height of the sphere
document
.querySelector("#heightControl")
.addEventListener("onChanged", (evt) => {
// modify Three.js object
let object = document.querySelector("a-sphere").object3D;
object.scale.y = evt.detail.value;
});
// change wireframe rendering
document
.querySelector("#wireframe")
.addEventListener("onChanged", (evt) => {
let el = document.querySelector("a-sphere");
// set entity attribute
el.setAttribute("wireframe", evt.detail.value);
});
// change opacity
document
.querySelector("#translucent")
.addEventListener("onChanged", (evt) => {
let el = document.querySelector("a-sphere");
// modify component attribute
el.setAttribute("material", "opacity", evt.detail.value ? 0.5 : 1);
});
</script>
</body>
</html>