a-frame-cube-face-transition-template/index.html at main · geolab-UVA/a-frame-cube-face-transition-template · GitHub

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
<!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

       The face disposition in the unfolding of the cube with currentFace = 0 is given by
        *********  *********  *********  *********

        *********  TOP(2)     *********  *********

        LEFT(3)    FRONT(0)   RIGHT(1)   BACK(5)

        *********  BOTTOM(4)  *********  *********

        *********  *********  *********  *********

        If currentFace = 1 then we should have:

        *********  *********  *********  *********

        *********  ?????(?)   *********  *********

        FRONT(0)   RIGHT(1)   BACK(5)    LEFT(3)

        *********  ??????(?)  *********  *********

        *********  *********  *********  *********

        Note that the faces might need to be rotated.
      -->

    <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>

      <!-- 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>

      <!-- 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>

      <!-- 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>

      <!-- 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>

      <!-- 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>
    </a-entity>
  </a-scene>
</body>

</html>