aframe-shake2show-component
Version:
Using shake.js to display toggle UI modal
92 lines (79 loc) • 3.56 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Shake2Show Component Demo</title>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="description" content="aframe-shake2show-component demo">
<meta name="apple-mobile-web-app-capable" />
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="../dist/aframe-shake2show-component.min.js"></script>
<style type="text/css">
#desktopBtn{
display: block;
position: absolute;
width:150px;
height: 50px;
top: 0;
left: 0;
z-index: 9999;
background-color: #f5f5f5;
color: #222;
}
@media only screen and (min-device-width: 320px)
and (max-device-width: 736px) {
/* mobile specific style */
#desktopBtn{ display: none;}
}
</style>
</head>
<body>
<button id="desktopBtn" onCLick="shakeMe();">Click to simulate ShakeEvent</button>
<a-scene>
<a-assets>
<a-mixin id="grid"
geometry="primitive:plane; width: 25; height: 25"
rotation="-90 0 0"
material="src:assets/grid.png; repeat:25 25"
></a-mixin>
</a-assets>
<a-entity shake2show visible="false" geometry="primitive: cylinder; height:0.025; radius:0.1;" material="shader:flat; color: yellow" rotation="90 0 0">
<a-entity geometry="primitive:cylinder; height:0.025; radius:0.025;" material="shader:flat; color:black" position="-0.035 0.01 -0.02">
</a-entity>
<a-entity geometry="primitive:cylinder; height:0.025; radius:0.025;" material="shader:flat; color:black" position="0.035 0.01 -0.02">
</a-entity>
<a-entity geometry="primitive:cylinder; height:0.025; radius:0.05; theta-start:-90; theta-length:180;" material="shader:flat; color:black" position="0 0.015 0.02" >
</a-entity>
</a-entity>
<!-- Grid -->
<a-entity mixin="grid"></a-entity>
<a-sky color="#BCC6CD"></a-sky>
<a-entity camera="userHeight:1.6" look-controls wasd-controls>
<a-cursor></a-cursor>
</a-entity>
</a-scene>
<script>
// for dev on for desktop only
var triggerShake = document.createEvent("HTMLEvents");
triggerShake.initEvent("shake", true, true);
function shakeMe(){
document.dispatchEvent(triggerShake);
}
</script>
</body>