-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (101 loc) · 4.41 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@fb96ab2/dist/aframe-extras.min.js"></script>
<script src="js/cube-face-arranger.js"></script>
<title>Cube Geometry</title>
</head>
<body>
<!-- The code for the cube-face-arranger component is in js/cube-face-arranger -->
<a-scene>
<a-sky id="sky" color="#1A0A2A"></a-sky>
<!--
We position our rig and the faces inside an element "cube-geometry"
This element does not have a shape associated to it. It serves as a container only.
To this element we attache the cube-face-arranger component whose job is
to programmatically arrange the faces of the cube.
If you see, initially, all faces are positioned overlapping at the origin (we do not specify position)
-->
<!-- The cube-face-arranger component takes a property: currentFace
You can try to change the currentFace property below to any number from 0 to 5.
See what happens in the console and study the code!
The meaning of currentFace is a number 0-5 that specifies which face should be positioned
in position 0 of the unfolding
-->
<a-entity id="cube-geometry" cube-face-arranger="currentFace: 0">
<a-entity id="rig" movement-controls position="0 0 0">
<a-entity id="camera" camera="fov:55" position="0 1.6 0" look-controls></a-entity>
</a-entity>
<!-- Next are the faces-->
<!-- To better keep track of the rotation of the faces you might want to add some sub-shapes to the faces
to distinguish where the up is. For example you can add a cone that "points" in one specific direction.
You may want to start by figuring out only the position, and then
-->
<!-- FRONT(0) (green)-->
<a-entity id="face_0" geometry="primitive: plane; width: 10; height: 10" material="color: green; side: double"
rotation="90 0 0">
<a-entity
id="cone0"
geometry="primitive: cone; radiusBottom: 0; radiusTop: 1; height: 2"
material="color: green"
position="0 0 -1"
></a-entity>
</a-entity>
<!-- RIGHT(1) (orange) -->
<a-entity id="face_1" geometry="primitive: plane; width: 10; height: 10" material="color: orange; side: double"
rotation="90 0 0">
<a-entity
id="cone1"
geometry="primitive: cone; radiusBottom: 0; radiusTop: 1; height: 2"
material="color: orange"
position="0 0 -1"
></a-entity>
</a-entity>
<!-- TOP(2) (blue)-->
<a-entity id="face_2" geometry="primitive: plane; width: 10; height: 10" material="color: blue; side: double"
rotation="90 0 0">
<a-entity
id="cone2"
geometry="primitive: cone; radiusBottom: 0; radiusTop: 1; height: 2"
material="color: blue"
position="0 0 -1"
></a-entity>
</a-entity>
<!-- LEFT(3) (yellow)-->
<a-entity id="face_3" geometry="primitive: plane; width: 10; height: 10" material="color: yellow; side: double"
rotation="90 0 0">
<a-entity
id="cone3"
geometry="primitive: cone; radiusBottom: 0; radiusTop: 1; height: 2"
material="color: yellow"
position="0 0 -1"
></a-entity>
</a-entity>
<!-- BOTTOM(4) (pink)-->
<a-entity id="face_4" geometry="primitive: plane; width: 10; height: 10" material="color: pink; side: double"
rotation="90 0 0">
<a-entity
id="cone4"
geometry="primitive: cone; radiusBottom: 0; radiusTop: 1; height: 2"
material="color: pink"
position="0 0 -1"
></a-entity>
</a-entity>
<!-- BACK(5) (red) -->
<a-entity id="face_5" geometry="primitive: plane; width: 10; height: 10" material="color: red; side: double"
rotation="90 0 0">
<a-entity
id="cone5"
geometry="primitive: cone; radiusBottom: 0; radiusTop: 1; height: 2"
material="color: red"
position="0 0 -1"
></a-entity>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>