steves-gallery/index.html at master · jacobleech/steves-gallery · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Art Gallery | Steven Leech</title>
    <meta name="description" content="Art Gallery | Steven Leech">
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>

        <img src="assets/floor.jpg" id="floor">
        <img src="assets/ceiling.jpg" id="ceiling">
        <img src="assets/wall.jpg" id="wall">


        <img src="assets/steves-cowboy.png" id="cowboy">

      </a-assets>

      <a-entity id="left-hand"
        brush
        paint-controls="hand: left"
        ui
        teleport-controls>
      </a-entity>

      <a-entity id="right-hand"
        brush
        paint-controls="hand: right"
        ui
        teleport-controls>
      </a-entity>

      <a-entity light="type: ambient; color: #BBB"></a-entity>
      <a-entity light="type: ambient; color: #FFF; intensity: 0.2" position="-0.5 30 1"></a-entity>

      <!-- Ceiling -->
      <a-box depth="50" height="0.1" width="50" position="0 9 0" rotation="0 90 0"></a-box>

      <!-- Floor -->
      <a-box depth="50" height="0.1" width="50" position="0 0 0" rotation="0 90 0"></a-box>

      <!-- Exterior Wall -->
      <a-box depth="50" height="30" width="50" position="0 5 0" rotation="0 0 0" color="#ededed"></a-box>

      <!-- Picture on front Wall -->
      <a-box height="3" width="5.2" depth="0.15" material="side: front; src: #cowboy;" position="0 4.5 -24.99"></a-box>

      <!-- Picture on back Wall -->
      <a-box height="3" width="5.2" depth="0.15" material="side: front; src: #cowboy;" position="0 4.5 24.99" rotation="0 180 0"></a-box>

      <!-- Picture on right Wall -->
      <a-box height="3" width="5.2" depth="0.15" material="side: front; src: #cowboy;" position="24.99 4.5 0" rotation ="0 -90 0"></a-box>

      <!-- Picture on right Wall -->
      <a-box height="3" width="5.2" depth="0.15" material="side: front; src: #cowboy;" position="-24.99 4.5 0" rotation="0 90 0"></a-box>

      <a-camera>
        <a-cursor id="cursor">
          <a-animation begin="click" easing="ease-in" attribute="scale"
                       fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
          <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                       from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-cursor>
      </a-camera>

    </a-scene>
  </body>
</html>