2017-10-24 05:41:19 +03:00
<!doctype html>
2017-09-05 04:59:34 +03:00
< html >
< head >
< title > WebXR examples< / title >
< meta charset = "utf-8" >
2017-10-24 05:41:19 +03:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2017-09-05 04:59:34 +03:00
< style >
2017-09-17 22:12:44 +03:00
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: white;
font-family: sans-serif;
2017-09-17 22:36:25 +03:00
font-size: 16px;
line-height: 1.2em;
2017-09-17 22:12:44 +03:00
}
body > section {
2017-09-17 22:36:25 +03:00
padding: 60px;
2017-09-17 22:12:44 +03:00
}
ul {
list-style: none;
padding-left: 0;
}
li {
2017-09-17 22:36:25 +03:00
margin-bottom: 35px;
}
.intro {
max-width: 40em;
}
.source {
font-size: 0.8em;
}
a {
text-decoration: none;
}
li a {
font-size: 1.3em;
}
li p {
margin-top: 0.5em;
2017-09-17 22:12:44 +03:00
}
2017-09-05 04:59:34 +03:00
< / style >
< / head >
< body >
2017-09-17 22:12:44 +03:00
< section >
< h1 > WebXR Examples< / h1 >
2017-09-05 04:59:34 +03:00
2017-09-17 22:36:25 +03:00
< p class = "intro" >
Below you will find examples of WebXR experiences. If you are a developer, click the source code links to see how to use the < a href = "https://github.com/mozilla/webxr-polyfill" > WebXR polyfill< / a > to create your own AR or VR experiences.
< / p >
< h2 > Examples< / h2 >
2017-09-17 22:12:44 +03:00
< ul >
2017-09-17 22:36:25 +03:00
< li >
< a href = "examples/ar_simplest/" > Simplest AR< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/ar_simplest/index.html" > source< / a >
< p > Use Three.js to position the Utah Teapot in an augmented reality scene.< / p >
< / li >
< li >
< a href = "examples/vr_simplest/" > Simplest VR< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/vr_simplest/index.html" > source< / a >
< p > Use Three.js to position the Utah Teapot in an virtual reality scene.< / p >
< / li >
< li >
< a href = "examples/ar_anchors/" > Anchors< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/ar_anchors/index.html" > source< / a >
< p > Position boxes in space and receive updated positions using ARKit anchors.< / p >
< / li >
2017-09-18 03:11:54 +03:00
< li >
< a href = "examples/hit_test/" > Hit test< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/hit_test/index.html" > source< / a >
< p > Find anchors by searching on tap events.< / p >
< / li >
2017-10-07 01:39:22 +03:00
< li >
< a href = "examples/peoples/" > Peoples< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/peoples/index.html" > source< / a >
< p > Place animated people on surfaces.< / p >
< / li >
2017-10-07 03:40:16 +03:00
< li >
< a href = "examples/boombox/" > Boom box< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/boombox/index.html" > source< / a >
2017-12-22 15:38:19 +03:00
< p > A shiny boom box in an environment map.< / p >
< / li >
< li >
< a href = "examples/reticle/" > Reticle< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/reticle/index.html" > source< / a >
< p > Place a reticle on surfaces.< / p >
2017-10-07 03:40:16 +03:00
< / li >
2017-12-29 19:53:32 +03:00
< li >
< a href = "examples/light/" > Light< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/light/index.html" > source< / a >
< p > Place a reticle on surfaces with light estimation.< / p >
< / li >
2017-09-17 22:12:44 +03:00
< / ul >
< / li >
2017-09-05 04:59:34 +03:00
< / body >
< / html >
