LibTour/index.html at master · aredshift/LibTour · 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
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360&deg; Main Library Book Stack Tour</title>
    <meta name="description" content="360&deg; Image Gallery - A-Frame">

    <!-- Include all the javascript files that are used -->
    <!-- <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> -->
    <!-- <script src="https://npmcdn.com/aframe-animation-component@3.0.1"></script> -->
    <!-- <script src="https://npmcdn.com/aframe-event-set-component@3.0.1"></script> -->
    <!-- <script src="https://npmcdn.com/aframe-layout-component@3.0.1"></script> -->

    <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@5/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-layout-component@5.3.0/dist/aframe-layout-component.min.js"></script>
    <script src="https://unpkg.com/aframe-template-component@3.2.1/dist/aframe-template-component.min.js"></script>
    <script src="https://unpkg.com/aframe-proxy-event-component@2.1.0/dist/aframe-proxy-event-component.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
    <script src="https://unpkg.com/aframe-animation-timeline-component@1.6.0/dist/aframe-animation-timeline-component.min.js"></script>

    <script src="/LibTour/components/objects.js"></script>
    <script src="/LibTour/components/set-image.js"></script>
    <script src="/LibTour/components/audio.js"></script>

  </head>
  <body>
    <a-scene>
      <a-assets timeout="8000">
        <!-- Create our image and audio assets -->
        <img id="arrow-thumb" crossorigin="anonymous" src="assets/arrow.png">
        <img id="this-image" crossorigin="anonymous" src="assets/imgs/middle_passage_and_horizontal/1406.jpg">
        <!-- load image of requested starting location -->
        <script src="/LibTour/components/initialize_image.js"></script>
        <audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
        <img id="this-image-east" crossorigin="anonymous" src="/LibTour/assets/imgs/middle_passage_and_horizontal/1406.jpg">
        <img id="this-image-west" crossorigin="anonymous" src="/LibTour/assets/imgs/middle_passage_and_horizontal/1406.jpg">
        <img id="this-image-north" crossorigin="anonymous" src="/LibTour/assets/imgs/middle_passage_and_horizontal/1406.jpg">
        <img id="this-image-south" crossorigin="anonymous" src="/LibTour/assets/imgs/middle_passage_and_horizontal/1406.jpg">

        <!-- zoom in text template to be reused. -->
        <script id="link" type="image/html">
          <a-entity class="link" visible="true"
            geometry="primitive: plane; height: 1; width: 1"
            material="shader: flat; color: yellow"

            event-set__mouseenter="scale: 4 4 4 "
            event-set__mouseleave="scale: 1 1 1"
            text="align: center; wrap-count: 32; color: black; value: Paging stations were placed throughout the centralized stacks, complete with pneumatic tubes for relaying the written book requests to pages and access to a conveyor system to transport materials. In practice, when a patron placed a materials request at the circulation desk, a message was sent through the pneumatic tube system to the correct page’s desk, located near the item in the stacks. The page would then physically retrieve the item and place it on the library’s conveyor system, which would deliver it to the circulation desk to be, finally, delivered to the patron."
            sound="on: click; src: #click-sound"
            onclick="playAudio('text_audio')">
          </a-entity>
         </script>
      </a-assets>

      <a-sound id="text_audio" src="#click-sound" autoplay="false"> </a-sound>

      <!-- 360-degree image of current position in library -->
      <a-sky id="image-current" radius="10" src="#this-image"
          animation__1="property: color; dir: forward; dur: 800; easing: easeInOutSine; loop: false; to: #000"
          animation__2="property: color; dir: forward; dur: 800; easing: easeInOutSine; loop: false; to: #FFF">
          <!-- Animation that fades image to black -->
          <!--<a-animation begin="startFade" attribute="material.color" dur="800" from="#FFF" to="#000" repeat="0" dir="normal"></a-animation>-->
          <!-- Animation that fades from black to image -->
          <!--<a-animation begin="endFade" attribute="material.color" dur="800" from="#000" to="#FFF" repeat="0" dir="normal"></a-animation>-->
      </a-sky>

      <!-- Create arrows that link in each of the four possible directions -->
      <a-entity id="goRightLink" layout="type: line; margin: 1.5" position="-6 -1.2 0" rotation="0 90 0" onclick="changeImage('right');" visible="true">
        <a-entity class="link" geometry="primitive: plane; height: 0.5; width: 1" material="shader: flat; src: /LibTour/assets/arrow.png; alphaTest: 0.5; opacity: 0.6" event-set__1="_event: mousedown; scale: 1 1 1" event-set__2="_event: mouseup; scale: 1.2 1.2 1" event-set__3="_event: mouseenter; scale: 1.2 1.2 1" event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
      </a-entity>
      <a-entity id="goLeftLink" layout="type: line; margin: 1.5" position="6 -1.2 0" rotation="0 270 0" onclick="changeImage('left');" visible="true">
          <a-entity class="link" geometry="primitive: plane; height: 0.5; width: 1" material="shader: flat; src: /LibTour/assets/arrow.png; alphaTest: 0.5; opacity: 0.6" event-set__1="_event: mousedown; scale: 1 1 1" event-set__2="_event: mouseup; scale: 1.2 1.2 1" event-set__3="_event: mouseenter; scale: 1.2 1.2 1" event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
      </a-entity>
      <a-entity id="goForwardLink" layout="type: line; margin: 1.5" position="0 -1.2 6" rotation="0 180 0" onclick="changeImage('forward');" visible="false">
          <a-entity class="link" geometry="primitive: plane; height: 0.5; width: 1" material="shader: flat; src: /LibTour/assets/arrow.png; alphaTest: 0.5; opacity: 0.6" event-set__1="_event: mousedown; scale: 1 1 1" event-set__2="_event: mouseup; scale: 1.2 1.2 1" event-set__3="_event: mouseenter; scale: 1.2 1.2 1" event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
      </a-entity>
      <a-entity id="goBackwardLink" layout="type: line; margin: 1.5" position="0 -1.2 -6" rotation="0 0 0" onclick="changeImage('backward');" visible="false">
          <a-entity class="link" geometry="primitive: plane; height: 0.5; width: 1" material="shader: flat; src: /LibTour/assets/arrow.png; alphaTest: 0.5; opacity: 0.6" event-set__1="_event: mousedown; scale: 1 1 1" event-set__2="_event: mouseup; scale: 1.2 1.2 1" event-set__3="_event: mouseenter; scale: 1.2 1.2 1" event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
      </a-entity>

       <!-- ray trigger -->
       <a-entity id="texts" layout="type: line; margin: 3" position="3 1 3" >
         <!--<a-entity template="src: #water" visible="true"></a-entity> -->
         <a-entity template="src: #link" visible="true" position="-1 0.5 3" rotation="0 245 0" ></a-entity>s
       </a-entity>


      <!-- Camera + cursor. -->
      <!--<a-entity camera look-controls id="camera" rotation="0 270 0">
        <a-cursor id="cursor"
          animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
          animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
          event-set__1="_event: mouseenter; color: springgreen"
          event-set__2="_event: mouseleave; color: black"
          fuse="true"
          raycaster="objects: .link">
        </a-cursor>
      </a-entity> -->

     <a-entity position="0 1.7 0">
         <a-entity camera look-controls>
            <a-entity position="0 0 -3"
               geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.06;"
               material="color: black; shader: flat"
               animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
               animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
               event-set__1="_event: mouseenter; material.color: springgreen"
               event-set__2="_event: mouseleave; material.color: black"
               raycaster="objects: .link"
               cursor="maxDistance: 30; fuse: true">
            </a-entity>

            <a-box id="audio_indicator" opacity="0.5" color="gray" width="0.5" height="0.3" depth="0.001"
                   position = "1.7 1 -2"
                   visible="false"
                   text="align: center; wrap-count: 12; color: black; value: Audio is playing">
            </a-box>

        </a-entity>
      </a-entity>

      <a-entity id="camera" camera="userHeight: 1.6" look-controls cursor="rayOrigin: mouse"></a-entity>

      <!-- reset facing direction and visibility of 4 directions of the starting location image -->
      <script src="/LibTour/components/set_init_image.js"></script>
    </a-scene>
  </body>
</html>

<!--  Stop being dumb github :) -->