GitBucket
Newer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, DOM Overlay! • A-Frame</title>
<meta name="description" content="Hello, World! • A-Frame">
<script src="../../../dist/aframe-master.js"></script>
<style>
/* By default, hide the DOM Overlay element. */
#overlay {
display: none;
}
/* Show the DOM Overlay element while active (:xr-overlay pseudoclass) */
#overlay:xr-overlay {
display: initial;
}
#greeting {
background-color: rgba(1, 1, 1, 0.25);
margin: 10px;
}
#exit-ar {
position: absolute;
right: 40px;
bottom: 40px;
background: rgba(127,127,127,0.25);
color: white;
border: 1px solid rgba(255,255,255,0.25);
padding: 6px 8px;
font-weight: bold;
}
</style>
<script>
AFRAME.registerComponent('exit-ar-button', {
schema: {
element: {type: 'selector'}
},
init: function () {
this.data.element.addEventListener('click', ev => {
this.el.sceneEl.renderer.xr.getSession().end();
});
}
});
</script>
</head>
<body>
<div id="overlay">
<span id="greeting">
Hi, I'm the DOM Overlay
</span>
<button id="exit-ar">Exit AR</button>
</div>
<a-scene background="color: #ECECEC"
webxr="optionalFeatures: dom-overlay; overlayElement: #overlay">
<a-entity exit-ar-button="element: #exit-ar"></a-entity>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>