page2.html 2.59 KB
Newer Older
Alfakhori's avatar
Alfakhori committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<!--
/*
 * Copyright 2017 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
Alfakhori's avatar
Alfakhori committed
18
<html>
Alfakhori's avatar
Alfakhori committed
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
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building an augmented reality application with the WebXR Device API</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

    <!-- three.js -->
    <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
    <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>

    <link rel="stylesheet" type="text/css" href="../shared/app.css" />
    <script src="../shared/utils.js"></script>
  </head>
  <body>
    <div id="enter-ar-info" class="mdc-card demo-card">
      <h2>Augmented Reality with the WebXR Device API</h2>
      <p>
        This is an experiment using augmented reality features with the WebXR Device API.
        Upon entering AR, you will be surrounded by a world of cubes.
        Learn more about these features from the <a href="https://codelabs.developers.google.com/codelabs/ar-with-webxr">Building an augmented reality application with the WebXR Device API</a> Code Lab.
      </p>

      <!-- Starting an immersive WebXR session requires user interaction. Start the WebXR experience with a simple button. -->
      <a id="enter-ar" class="mdc-button mdc-button--raised mdc-button--accent">
        Start augmented reality
      </a>
    </div>

    <div id="unsupported-info" class="mdc-card demo-card">
      <h2>Unsupported Browser</h2>
      <p>
        Your browser does not support AR features with WebXR. Learn more about these features from the
        <a href="https://codelabs.developers.google.com/codelabs/ar-with-webxr">Building an augmented reality application with the WebXR Device API</a> Code Lab.
      </p>
    </div>
    <script src="app.js"></script>
    <div id="stabilization"></div>
  </body>
Alfakhori's avatar
Alfakhori committed
58
</html>