webvr/index.html at master · AJDempsey/webvr · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<html>
  <head>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
  </head>
  <body>
    <!--
      Set up VR scene

      This will contain every entity in the scene, handles all the 3D
      (all the things that three.js deals with, canvas, camera, lights,
      renderer, renderloop) quite a lot of heavy lifting!
    -->
    <a-scene>
      <!--
        Adding objects

        Objects can be added either using the base object <a-entity> and filling
        in all the components ourself or by using the premitives that a-frame
        provides. Things like <a-box>, <a-cylinder> etc.
        See documentation:
        primitives: https://github.com/aframevr/aframe/tree/master/docs/primitives
        entity: https://github.com/aframevr/aframe/blob/master/docs/core/entity.md
      -->
      <a-box color="red"></a-box>
      <a-entity id="test-box" geometry="primitive: box" material="color: red">
      </a-entity>

      <!--
        3D space in a-frame

        Coordinate system for a-frame uses a right hand coordinate system.
        + x-axis extends to the right (thumb)
        + y-axis extends upwards (index)
        + z-axis extends out of the screen (middle)
        Distance is measured in meters (remember this when developing)
        Rotation is measured in degrees (positive direction is found by
          pointing the right thumb along the +ve axis and the finger curl
          is the positive direction)
        An entity is placed in the world using the position, rotation, and scale
        components.

        Without these components the position defaults to (0,0,0), given this the
        above boxes exist at the same place as the default camera. To view the
        boxes we need to either move around or move the boxes. We'll create a new
        entity and display it where we can see from the start.
      -->
      <a-box position="0 0.90 -10" rotation="0 45 45" scale="2 4 2" color="blue">
        <a-sphere position"1 0 3" color="black" material="wireframe: true"></a-sphere>
      </a-box>
      <!-- The above demonstrates inheretance of translations -->

      <!--
        Adding images as textures

        It's possible to apply an image to an entity by using the src attribute.
        Any colour the entity has will get blended into the texture. Default colour is
        white so just removing the colour attribute is enough.
        This isn't the most performant, instead use the asset management system.

      -->
      <a-box src="https://i.imgur.com/mYmmbrp.jpg" position="5 2 -5" rotation="0 -45 45"
        scale="2 2 2" id="fetchBox"></a-box>

      <!--
        Asset management

        While you can directly link to textures it's not recommended, instead
        use asset management systems instead. This makes it easier for the
        browser to cache assets, and a-frame will be able to fetch resources
        before rendering.
      -->
      <a-assets>
        <img src="https://i.imgur.com/mYmmbrp.jpg" id="testAsset">
      </a-assets>

      <a-box id="assetBox" src="#testAsset" position="-5 2 -5"
                                            rotation="0 -45 45" scale="2 2 2">
      </a-box>

      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
      <!--
        Custom environments

        Instead of importing an environment it's possible to build environments
        from primitives, I wont replace the environment but I'lll add the code
        to this comment.

        The Sky
        <a-sky color="#222"></a-sky>

        This will set the background of the scene to a certain color. The sky
        is the inside of a large sphere. It can also be set to a 360 video or
        image (use an asset for this and the src attribute)

        The Ground
        <a-plane src="#groundAsset" rotation="-90 0 0 width="30" height="30"
          repeat="10 10"></a-plane>

        The ground is created using a plane. By default a plane is parallel to
        the XY axis, rotate 90 degree in negative X axis to make it to parallel
        to the XZ axis. Make it large using the width and height attributes and
        repeat the texture (how many times in the X and Y direction)

        Lighting
        To create lighting use the <a-light> entity, there's multiple different
        types of lights they match with the three.js lights.
        By default a-frame provides ligthing for the scene (otherwise it would
        be dark) when we add <a-light> to the scene a-frame removes the default
        light sources.

        <a-light type="ambient" color="#445457"></a-light>
        <a-light type="point" intensity="2" position="2 4 4"></a-light>

        Combining these primitives and more will allow you to build your own
        environments. I'll stick with the prefab just now.
      -->

      <!--
        Annimations

        We can add animations to an element by placing <a-animation> element
        as a child.
        Animations interpolate, or tween, a value over time.
        Here the animation works on the position attribute, animating to -5 2.2 -5
        (twenty cm higher) alternating the direction every cycle, with each cycles
        duration lasting 2000ms and repeats forever.
      -->
      <a-animation id="bounceAnnimation" attributes="position"
                                         to="-5 2.2 -5"
                                         direction="alternate"
                                         dur="2000"
                                         repeat="indefinite">
      </a-animation>
      <!-- add to an existing box instead of cluttering up the scene.
          bad practice? Probably.-->
      <script>
        document.getElementById("assetBox").appendChild(document.getElementById("bounceAnnimation"))
      </script>

      <!--
        Cursor and Camera

        To create interactions we can use a cursor on mobile and desktop.
        This allows us to "click" on things in mobile using our gaze and using
        the mouse on desktop.
        To create a cursor attached to the camera we need to override the
        default cursor that a-frame provides and add the cursor as a child of
        the camera
      -->
      <a-camera>
        <a-cursor color="white"></a-cursor>
      </a-camera>

      <!--
        Events and reacting to them

        Scripting events is possible in two ways, either through javascript
        or through the <a-animation> tag.
        Using javascript is done in the same manner as any other DOM element
        for good practice this should be wrapped in a new component and added
        to the entity to provide context to the component.

        <a-animation> has a feature to begin its animation when the entity it is
        animating emits an event. this can be done thorugh the begin attribute
        which takes the event name.
      -->
      <script>
        AFRAME.registerComponent('scale-on-mouseenter',
            { schema: {to: {default: "2.5 2.5 2.5"}},
              init: function() {
                var data = this.data;
                this.el.addEventListener('mouseenter', function() {
                  this.setAttribute('scale', data.to);
                });
              }
            });
        AFRAME.registerComponent('scale-on-mouseleave',
            { schema: {to: {default: "2.5 2.5 2.5"}},
              init: function() {
                var data = this.data;
                this.el.addEventListener('mouseleave', function() {
                  this.setAttribute('scale', data.to);
                });
              }
            });
        document.getElementById("assetBox").setAttribute("scale-on-mouseenter",
            "to: 2.2 2.2 2.2");
        document.getElementById("assetBox").setAttribute("scale-on-mouseleave",
            "to: 2 2 2");
      </script>
      <a-animation attribute="scale" begin="mouseenter" dur="300"
                    to="2.3 2.3 2.3" id="scale-enter"></a-animation>
      <a-animation attribute="scale" begin="mouseleave" dur="300"
                    to="2 2 2" id="scale-leave"></a-animation>
      <a-animation attribute="rotation" begin="click" dur="2000"
                    to="360 405 45" id="rotate-clicker"></a-animation>
      <script>
        var node = document.getElementById("fetchBox");
        node.appendChild(document.getElementById("scale-enter"));
        node.appendChild(document.getElementById("scale-leave"));
        node.appendChild(document.getElementById("rotate-clicker"));
      </script>

      <!--
        Sound

        Audio is increadibly important for VR, it should be high quality and
        360 degree to complete the immersion.
        There are two ways to do this using an <audio> asset or using <a-sound>
        and placing it at a position in the scene so it gets louder as we get closer
      -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav"
        audioplay="true" position="-3 1 -4"></a-sound>

      <!--
        Text

        A-Frame comes with a text component. There are several ways to render text,
        each with their advantages and disadvantages. The in built A-Frame text
        component is sharp and performant enough for our use here.
      -->
      <a-text value="Hello, A-Frame!" color="#BBB" position="-0.9 0.2 -3"
        scale="1.5 1.5 1.5"></a-text>

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