added description overlays
This commit is contained in:
Josh Marinacci
Родитель
71330d9403
Коммит
a8623d62fc
|
|
@ -32,6 +32,17 @@
|
|||
transform: translate(-50%, -50%);
|
||||
font-size: 20px;
|
||||
}
|
||||
#description {
|
||||
pointer-events: auto;
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
background-color:rgba(255,255,255,0.7);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
position:absolute;
|
||||
bottom: 0px;
|
||||
left:0px;
|
||||
right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../libs/three.js"></script>
|
||||
|
|
@ -41,6 +52,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="target" />
|
||||
<div onclick="hideMe(this)" id="description">
|
||||
<h2>Anchors</h2>
|
||||
<h5>(click to dismiss)</h5>
|
||||
<p>Position boxes by tapping. The box positions are updated using ARKit anchors.</p>
|
||||
</div>
|
||||
<script>
|
||||
class ARAnchorExample extends XRExampleBase {
|
||||
constructor(domElement){
|
||||
|
|
|
|||
|
|
@ -31,9 +31,29 @@
|
|||
<script type="module" src="../../polyfill/XRPolyfill.js"></script>
|
||||
<script nomodule src="../../dist/webxr-polyfill.js"></script>
|
||||
<script src="../common.js"></script>
|
||||
|
||||
<style type='text/css'>
|
||||
#description {
|
||||
pointer-events: auto;
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
background-color:rgba(255,255,255,0.7);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
position:absolute;
|
||||
bottom: 0px;
|
||||
left:0px;
|
||||
right: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target" />
|
||||
|
||||
<div onclick="hideMe(this)" id="description">
|
||||
<h2>Simplest AR</h2>
|
||||
<h5>(click to dismiss)</h5>
|
||||
<p>This example displays the Utah Teapot positioned in front of the viewer at head height.</p>
|
||||
</div>
|
||||
<script>
|
||||
/*
|
||||
ARSimplestExample shows how to populate the content scene
|
||||
|
|
|
|||
|
|
@ -24,6 +24,17 @@
|
|||
transform: translate(-50%, -50%);
|
||||
font-size: 20px;
|
||||
}
|
||||
#description {
|
||||
pointer-events: auto;
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
background-color:rgba(255,255,255,0.7);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
position:absolute;
|
||||
bottom: 0px;
|
||||
left:0px;
|
||||
right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../libs/three.min.js"></script>
|
||||
|
|
@ -34,6 +45,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="target" />
|
||||
<div onclick="hideMe(this)" id="description">
|
||||
<h2>Boombox</h2>
|
||||
<h5>(click to dismiss)</h5>
|
||||
<p>Shows a boombox in a VR environment. Uses 6DOF from WebXR to navigate within VR.</p>
|
||||
</div>
|
||||
<script>
|
||||
/*
|
||||
ARSimplestExample shows how to populate the content scene
|
||||
|
|
|
|||
|
|
@ -442,3 +442,5 @@ window.throttle = function(func, wait, leading=true, trailing=true) {
|
|||
window.throttledConsoleLog = throttle((...params) => {
|
||||
console.log(...params)
|
||||
}, 1000)
|
||||
|
||||
function hideMe(elem) { elem.style.display = 'none' }
|
||||
|
|
|
|||
|
|
@ -27,6 +27,17 @@
|
|||
transform: translate(-50%, -50%);
|
||||
font-size: 20px;
|
||||
}
|
||||
#description {
|
||||
pointer-events: auto;
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
background-color:rgba(255,255,255,0.7);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
position:absolute;
|
||||
bottom: 0px;
|
||||
left:0px;
|
||||
right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../libs/three.min.js"></script>
|
||||
|
|
@ -36,6 +47,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="target" />
|
||||
<div onclick="hideMe(this)" id="description">
|
||||
<h2>Hit Test</h2>
|
||||
<h5>(click to dismiss)</h5>
|
||||
<p>Find anchors by searching on tap events.</p>
|
||||
</div>
|
||||
<script>
|
||||
/*
|
||||
HitTestExample shows how to find surfaces or other features and place content relative to them.
|
||||
|
|
|
|||
|
|
@ -27,6 +27,17 @@
|
|||
transform: translate(-50%, -50%);
|
||||
font-size: 20px;
|
||||
}
|
||||
#description {
|
||||
pointer-events: auto;
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
background-color:rgba(255,255,255,0.7);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
position:absolute;
|
||||
bottom: 0px;
|
||||
left:0px;
|
||||
right: 0px;
|
||||
}
|
||||
</style>
|
||||
<script src="../libs/three.min.js"></script>
|
||||
<script src="../libs/loaders/BinaryLoader.js"></script>
|
||||
|
|
@ -49,6 +60,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="target" />
|
||||
<div onclick="hideMe(this)" id="description">
|
||||
<h2>Peoples</h2>
|
||||
<h5>(click to dismiss)</h5>
|
||||
<p>Place animated people on surfaces by tapping.</p>
|
||||
</div>
|
||||
<script>
|
||||
/*
|
||||
This is the THREE.js example from https://threejs.org/examples/webgl_points_dynamic.html ported to WebXR
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче