aframe-gui
Version:
A-Frame GUI components
613 lines (565 loc) • 18.1 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame GUI Dropdown</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<style type="text/css">
@font-face{
font-family:"Ionicons";
src:url("assets/fonts/ionicons.eot?v=2.0.1");
src:url("assets/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"),url("assets/fonts/ionicons.ttf?v=2.0.1") format("truetype"),url("assets/fonts/ionicons.woff?v=2.0.1") format("woff"),url("assets/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
font-weight:normal;
font-style:normal
}
body{font-family:Ionicons;}
.visuallyhidden {
position: absolute;
display: block;
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
}
</style>
<script src="js/aframe-gui.js"></script>
<script src="js/gui-env.js"></script>
</head>
<body>
<a-scene gui-env>
<a-assets>
<a-asset-item id="iconfont" src="assets/fonts/ionicons.ttf"></a-asset-item>
<a-asset-item id="fontfamily" src="https://fonts.googleapis.com/css?family=Fira+Sans"></a-asset-item>
</a-assets>
<a-entity id="Kingear_VR3D" position="1.5 2.75 -5" rotation="30 30 0">
<a-entity id="remotebody"
position="0 0 0"
rotation="0 0 0"
>
<a-box
width="1"
height="3"
depth="0.5"
color="#201D2D"
>
<a-cylinder
height="0.1"
radius="0.4"
color="#8E9EAB"
position="0 0.9 0.25"
rotation="90 0 0"
>
</a-cylinder>
<a-cylinder
height="0.1"
radius="0.4"
color="#8E9EAB"
position="0 0 0.25"
rotation="90 0 0"
>
<a-cylinder
height="0.05"
radius="0.075"
color="#EDF1F2"
position="0.35 0 -0.45"
>
<a-cylinder id="powerRemoteBtn"
height="0.1"
radius="0.05"
color="#DC2531"
position="0 0 0"
>
</a-cylinder>
</a-cylinder>
<a-cylinder id="bRemoteBtn"
height="0.15"
radius="0.15"
color="#41C7A2"
position="0 0.05 0.25"
>
</a-cylinder>
<a-cylinder id="xRemoteBtn"
height="0.15"
radius="0.15"
color="#6441A5"
position="0 0.05 -0.25"
>
</a-cylinder>
<a-cylinder id="yRemoteBtn"
height="0.15"
radius="0.15"
color="#EEBB3B"
position="0.25 0.05 0"
>
</a-cylinder>
<a-cylinder id="aRemoteBtn"
height="0.15"
radius="0.15"
color="#1D689D"
position="-0.25 0.05 0"
>
</a-cylinder>
</a-cylinder>
<a-box id="trigger"
width="0.9"
height="0.2"
depth="0.4"
color="#DC2531"
position="0 1.5 0"
>
<a-animation id="triggerPress" begin="press" attribute="height" dur="200" to="0.05"></a-animation>
<a-animation id="triggerRelease" begin="release" attribute="height" dur="200" to="0.2"></a-animation>
</a-box>
</a-box>
</a-entity>
<a-entity id="stick"
position="0 0.9 0.25"
rotation="0 0 0"
>
<a-cylinder
height="0.35"
radius="0.1"
color="#201D2D"
rotation="90 0 0"
position="0 0 0"
>
<a-sphere
color="#928DAB"
radius="0.3"
position="0 0.25 0"
scale="1 0.3 1"
>
</a-sphere>
</a-cylinder>
<a-animation id="stickUp" begin="up" attribute="rotation" dur="200" to="-30 0 0"></a-animation>
<a-animation id="stickDown" begin="down" attribute="rotation" dur="200" to="30 0 0"></a-animation>
<a-animation id="stickLeft" begin="left" attribute="rotation" dur="200" to="0 -30 0"></a-animation>
<a-animation id="stickRight" begin="right" attribute="rotation" dur="200" to="0 30 0"></a-animation>
<a-animation id="stickBack" begin="center" attribute="rotation" dur="200" to="0 0 0"></a-animation>
</a-entity>
</a-entity>
<a-entity id="Magicsee_R1" position="-1.5 2.5 -5" rotation="-20 -40 -30">
<a-entity id="remotebody2"
position="0 0 0"
rotation="0 0 0"
>
<a-torus
color="#201D2D"
arc="220"
radius="0.7"
radius-tubular="0.1.25"
rotation="0 -90 90"
position="0 0 -0.5"
></a-torus>
<a-box
width="1"
height="2"
depth="0.5"
color="#201D2D"
>
<a-box
width="0.9"
height="0.75"
depth="0.75"
color="#201D2D"
position="0 0.625 -0.25"
>
</a-box>
<a-sphere
radius="0.4"
color="#8E9EAB"
position="0 0.5 0.25"
rotation="90 0 0"
scale="1 0.3 1"
>
</a-sphere>
<a-entity
position="0 -0.5 0.25"
rotation="90 0 0"
>
<a-cylinder id="aRemoteBtn2"
height="0.15"
radius="0.15"
color="#1D689D"
position="0.2 0 -0.2"
>
</a-cylinder>
<a-cylinder id="bRemoteBtn2"
height="0.15"
radius="0.15"
color="#41C7A2"
position="-0.2 0 -0.2"
>
</a-cylinder>
<a-cylinder id="yRemoteBtn2"
height="0.15"
radius="0.15"
color="#EEBB3B"
position="0.2 0 0.2"
>
</a-cylinder>
<a-cylinder id="xRemoteBtn2"
height="0.15"
radius="0.15"
color="#6441A5"
position="-0.2 0 0.2"
>
</a-cylinder>
</a-entity>
<a-cylinder id="powerRemoteBtn2"
height="0.2"
radius="0.45"
color="#DC2531"
position="0 1 -0.45"
scale="1 1 0.3"
>
</a-cylinder>
<a-box id="trigger2"
width="0.9"
height="0.2"
depth="0.3"
color="#DC2531"
position="0 1 0"
>
<a-animation id="triggerPress2" begin="press" attribute="height" dur="200" to="0.05"></a-animation>
<a-animation id="triggerRelease2" begin="release" attribute="height" dur="200" to="0.2"></a-animation>
</a-box>
</a-box>
</a-entity>
<a-entity id="stick2"
position="0 0.5 0.25"
rotation="0 0 0"
>
<a-cylinder
height="0.35"
radius="0.1"
color="#201D2D"
rotation="90 0 0"
position="0 0 0"
>
<a-sphere
color="#928DAB"
radius="0.3"
position="0 0.25 0"
scale="1 0.3 1"
>
</a-sphere>
</a-cylinder>
<a-animation id="stickUp2" begin="up" attribute="rotation" dur="200" to="-30 0 0"></a-animation>
<a-animation id="stickDown2" begin="down" attribute="rotation" dur="200" to="30 0 0"></a-animation>
<a-animation id="stickLeft2" begin="left" attribute="rotation" dur="200" to="0 -30 0"></a-animation>
<a-animation id="stickRight2" begin="right" attribute="rotation" dur="200" to="0 30 0"></a-animation>
<a-animation id="stickBack2" begin="center" attribute="rotation" dur="200" to="0 0 0"></a-animation>
</a-entity>
</a-entity>
<a-gui-flex-container
flex-direction="row" justify-content="center" align-items="normal" component-padding="0.1"
opacity="0.7" width="12.5" height="0.5"
position="0 0.85 -6" rotation="0 0 0"
>
<a-gui-label
width="1.75" height="0.5"
value="Press" font-family="Arial">
</a-gui-label>
<a-gui-button
width="1.5" height="0.5"
onclick="triggerBtn" key-code="76"
value="Trigger(l)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="1.5" height="0.5"
onclick="powerBtn" key-code="79"
value="Power(o)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="0.75" height="0.5"
onclick="xBtn" key-code="89"
value="X(y)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="0.75" height="0.5"
onclick="yBtn" key-code="74"
value="Y(j)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="0.75" height="0.5"
onclick="aBtn" key-code="72"
value="A(h)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="0.75" height="0.5"
onclick="bBtn" key-code="85"
value="B(u)" font-family="Arial">
</a-gui-button>
<a-gui-label
width="1.75" height="0.5"
value="W/A/D/X" font-family="Arial">
</a-gui-label>
<a-gui-icon-button
width="0.75" height="0.5"
onclick="upStick" key-code="87"
icon="android-arrow-up"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.75" height="0.5"
onclick="downStick" key-code="88"
icon="android-arrow-down"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.75" height="0.5"
onclick="leftStick" key-code="65"
icon="android-arrow-back"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.75" height="0.5"
onclick="rightStick" key-code="68"
icon="android-arrow-forward"
>
</a-gui-icon-button>
</a-gui-flex-container>
<a-gui-flex-container
flex-direction="row" justify-content="center" align-items="normal" component-padding="0.1"
opacity="0.7" width="12.5" height="0.5"
position="0 0.25 -6" rotation="0 0 0"
>
<a-gui-label
width="1.75" height="0.5"
value="Release" font-family="Arial">
</a-gui-label>
<a-gui-button
width="1.5" height="0.5"
onclick="triggerBtnRelease" key-code="86"
value="Trigger(v)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="1.5" height="0.5"
onclick="powerBtnRelease" key-code="71"
value="Power(g)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="0.75" height="0.5"
onclick="yBtnRelease" key-code="84"
value="X(t)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="0.75" height="0.5"
onclick="yBtnRelease" key-code="78"
value="Y(n)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="0.75" height="0.5"
onclick="aBtnRelease" key-code="82"
value="A(r)" font-family="Arial">
</a-gui-button>
<a-gui-button
width="0.75" height="0.5"
onclick="bBtnRelease" key-code="70"
value="B(f)" font-family="Arial">
</a-gui-button>
<a-gui-label
width="1.75" height="0.5"
value="E/Z/Q/C" font-family="Arial">
</a-gui-label>
<a-gui-icon-button
width="0.75" height="0.5"
onclick="centerStick" key-code="69"
icon="android-arrow-up"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.75" height="0.5"
onclick="centerStick" key-code="90"
icon="android-arrow-down"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.75" height="0.5"
onclick="centerStick" key-code="81"
icon="android-arrow-back"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.75" height="0.5"
onclick="centerStick" key-code="67"
icon="android-arrow-forward"
>
</a-gui-icon-button>
</a-gui-flex-container>
<!-- Camera + cursor. -->
<a-entity id="cameraRig" position="0 1.6 0">
<a-camera look-controls wasd-controls position="0 0 0">
<a-gui-cursor id="cursor"
raycaster="objects: [gui-interactable]"
fuse="true" fuse-timeout="2000"
design="ring"
>
</a-gui-cursor> <!-- /cursor -->
</a-camera> <!-- /camera -->
</a-entity>
</a-scene>
<script>
window.upStick = function() { // mobile keycode 87 (w) release 69 (e)
// var stick = document.getElementById("stick");
// stick.setAttribute('rotation', '-30 0 0');
var stickUp =document.getElementById("stickUp");
stickUp.emit('up');
var stickUp2 =document.getElementById("stickUp2");
stickUp2.emit('up');
}
window.downStick = function() { // mobile keycode 88 (x) release 90(z)
//var stick = document.getElementById("stick");
//stick.setAttribute('rotation', '30 0 0');
var stickDown =document.getElementById("stickDown");
stickDown.emit('down');
var stickDown2 =document.getElementById("stickDown2");
stickDown2.emit('down');
}
window.leftStick = function() { // mobile keycode 65 (a) release 81 (q)
//var stick = document.getElementById("stick");
//stick.setAttribute('rotation', '0 -30 0');
var stickLeft =document.getElementById("stickLeft");
stickLeft.emit('left');
var stickLeft2 =document.getElementById("stickLeft2");
stickLeft2.emit('left');
}
window.rightStick = function() { // mobile keycode 68 (d) release 67 (c)
//var stick = document.getElementById("stick");
//stick.setAttribute('rotation', '0 30 0');
var stickRight =document.getElementById("stickRight");
stickRight.emit('right');
var stickRight2 =document.getElementById("stickRight2");
stickRight2.emit('right');
}
window.centerStick = function() {
//var stick = document.getElementById("stick");
//stick.setAttribute('rotation', '0 0 0');
var stickBack =document.getElementById("stickBack");
stickBack.emit('center');
var stickBack2 =document.getElementById("stickBack2");
stickBack2.emit('center');
}
window.triggerBtn = function() { // mobile keycode 76 (l)
console.log('pressed triggerBtn');
//var trigger = document.getElementById("trigger");
//trigger.setAttribute('height', '0.05');
var triggerPress =document.getElementById("triggerPress");
triggerPress.emit('press');
var triggerPress2 =document.getElementById("triggerPress2");
triggerPress2.emit('press');
}
window.triggerBtnRelease = function() { // mobile keycode 86 (v)
console.log('releases triggerBtn');
//var trigger = document.getElementById("trigger");
//trigger.setAttribute('height', '0.2');
var triggerRelease =document.getElementById("triggerRelease");
triggerRelease.emit('release');
var triggerRelease2 =document.getElementById("triggerRelease2");
triggerRelease2.emit('release');
}
window.powerBtn = function() { // mobile keycode 79 (o)
console.log('pressed powerBtn');
var powerRemoteBtn = document.getElementById("powerRemoteBtn");
powerRemoteBtn.setAttribute('height', '0.075');
var powerRemoteBtn2 = document.getElementById("powerRemoteBtn2");
powerRemoteBtn2.setAttribute('height', '0.05');
}
window.powerBtnRelease = function() { // mobile keycode 71 (g)
console.log('releases powerBtn');
var powerRemoteBtn = document.getElementById("powerRemoteBtn");
powerRemoteBtn.setAttribute('height', '0.1');
var powerRemoteBtn2 = document.getElementById("powerRemoteBtn2");
powerRemoteBtn2.setAttribute('height', '0.2');
}
window.xBtn = function() { // mobile keycode 89 (y)
console.log('pressed xBtn');
var xRemoteBtn = document.getElementById("xRemoteBtn");
xRemoteBtn.setAttribute('height', '0.05');
var xRemoteBtn2 = document.getElementById("xRemoteBtn2");
xRemoteBtn2.setAttribute('height', '0.05');
}
window.xBtnRelease = function() { // mobile keycode 84 (t)
console.log('releases xBtn');
var xRemoteBtn = document.getElementById("xRemoteBtn");
xRemoteBtn.setAttribute('height', '0.15');
var xRemoteBtn2 = document.getElementById("xRemoteBtn2");
xRemoteBtn2.setAttribute('height', '0.15');
}
window.yBtn = function() { // mobile keycode 74 (j)
console.log('pressed yBtn');
var yRemoteBtn = document.getElementById("yRemoteBtn");
yRemoteBtn.setAttribute('height', '0.05');
var yRemoteBtn2 = document.getElementById("yRemoteBtn2");
yRemoteBtn2.setAttribute('height', '0.05');
}
window.yBtnRelease = function() { // mobile keycode 78 (n)
console.log('releases yBtn');
var yRemoteBtn = document.getElementById("yRemoteBtn");
yRemoteBtn.setAttribute('height', '0.15');
var yRemoteBtn2 = document.getElementById("yRemoteBtn2");
yRemoteBtn2.setAttribute('height', '0.15');
}
window.aBtn = function() { // mobile keycode 72 (h)
console.log('pressed aBtn');
var aRemoteBtn = document.getElementById("aRemoteBtn");
aRemoteBtn.setAttribute('height', '0.05');
var aRemoteBtn2 = document.getElementById("aRemoteBtn2");
aRemoteBtn2.setAttribute('height', '0.05');
}
window.aBtnRelease = function() { // mobile keycode 82 (r)
console.log('releases aBtn');
var aRemoteBtn = document.getElementById("aRemoteBtn");
aRemoteBtn.setAttribute('height', '0.15');
var aRemoteBtn2 = document.getElementById("aRemoteBtn2");
aRemoteBtn2.setAttribute('height', '0.15');
}
window.bBtn = function() { // mobile keycode 85 (u)
console.log('pressed bBtn');
var bRemoteBtn = document.getElementById("bRemoteBtn");
bRemoteBtn.setAttribute('height', '0.05');
var bRemoteBtn2 = document.getElementById("bRemoteBtn2");
bRemoteBtn2.setAttribute('height', '0.05');
}
window.bBtnRelease = function() { // mobile keycode 70 (f)
console.log('releases bBtn');
var bRemoteBtn = document.getElementById("bRemoteBtn");
bRemoteBtn.setAttribute('height', '0.15');
var bRemoteBtn2 = document.getElementById("bRemoteBtn2");
bRemoteBtn2.setAttribute('height', '0.15');
}
/*
window.addEventListener("keyup", function (event) {
if (event.defaultPrevented) {
return; // Do nothing if the event was already processed
}
switch (event.keyCode) {
case 69: // release stick from up
console.log('stick release 69 (e)');
window.centerStick();
break;
case 90: // release stick from down
console.log('stick release 90 (z)');
window.centerStick();
break;
case 81: // release stick from left
console.log('stick release 81 (q)');
window.centerStick();
break;
case 67: // release stick from right
console.log('stick release 67 (c)');
window.centerStick();
break;
default:
return; // Quit when this doesn't handle the key event.
}
event.preventDefault();
}, true);
*/
</script>
</body>
</html>