aframe-gui
Version:
A-Frame GUI components
213 lines (198 loc) • 6.55 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame GUI</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/demo.js"></script>
<script src="js/aframe-gui.js"></script>
<script src="js/gui-env.js"></script>
</head>
<body>
<a-scene gui-env>
<a-assets>
<!-- Text Canvas -->
<canvas id="canvasObj" crossorigin="anonymous" webkit-playsinline=""></canvas>
<!--<audio id="classicRock" src="/assets/classicrock_15sec.wav" preload="auto"></audio>-->
</a-assets>
<a-gui-flex-container id="music_type_panel"
width="4" height="4"
is-top-container="true" flex-direction="column" justify-content="center" align-items="center" opacity="0.7"
position="-4.0 2.0 -1.5"
rotation="0 60 0"
>
<a-gui-button id="type_cinematic"
width="2.5" height="0.75" margin="0 0 0.1 0"
onclick="selectCinematic"
value="Cinematic"
font-family="Arial"
>
</a-gui-button>
<a-gui-button id="type_classic_rock"
width="2.5" height="0.75" margin="0 0 0.1 0"
onclick="selectClassicRock"
value="Rock"
font-family="Arial"
>
</a-gui-button>
<a-gui-button id="type_modern_folk"
width="2.5" height="0.75" margin="0 0 0.1 0"
onclick="selectModernFolk"
value="Modern Folk"
font-family="Arial"
>
</a-gui-button>
<a-gui-button id="type_90s_pop"
width="2.5" height="0.75" margin="0 0 0.1 0"
onclick="select90sPop"
value="90's Pop"
font-family="Arial"
>
</a-gui-button>
</a-gui-flex-container>
<a-gui-flex-container id="music_length_panel"
width="4" height="4"
is-top-container="true" flex-direction="column" justify-content="center" align-items="center" opacity="0.7"
position="0.0 2.0 -3"
rotation="0 0 0"
>
<a-gui-button id="length_5"
width="2.5" height="0.6" margin="0 0 0.1 0"
onclick="select5Seconds"
value="5 seconds"
font-family="Arial">
</a-gui-button>
<a-gui-button id="length_10"
width="2.5" height="0.6" margin="0 0 0.1 0"
onclick="select10Seconds"
value="10 seconds"
font-family="Arial">
</a-gui-button>
<a-gui-button id="length_15"
width="2.5" height="0.6" margin="0 0 0.1 0"
onclick="select15Seconds"
value="15 seconds"
font-family="Arial">
</a-gui-button>
<a-entity gui-item="type: icon-button; width: 0.75; height: 0.75; margin: 0 0 0.1 0;"
gui-interactable="clickAction: submitMusicCreate;"
gui-icon-button="
icon:ios-musical-notes;
"
>
</a-entity>
<a-entity gui-item="type: progress-bar; width: 2.5; height: 0.25"
gui-progressbar=""
>
</a-entity>
</a-gui-flex-container>
<a-gui-flex-container id="music_player_panel"
width="4" height="4"
is-top-container="true" flex-direction="column" justify-content="center" align-items="center" opacity="0.7"
position="4.0 2.0 -1.5"
rotation="0 -60 0"
>
<a-entity id="loop_toggle"
gui-item="type: toggle; width: 2.5; height: 0.75; margin: 0 0 0.3 0;"
gui-interactable="clickAction: toggleLoop;"
gui-toggle="
text:Loop;
fontFamily:'Fira Sans';
"
>
</a-entity>
<a-entity id="horizontal_icon_button_row"
gui-item="type: flex-container; width: 3; height: 1;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: center; opacity: 0.0;">
<a-entity gui-item="type: icon-button; width: 0.75; height: 0.75; opacity: 0.3; margin: 0 0.1 0 0;"
gui-interactable="clickAction: playMusic;"
gui-icon-button="
icon:play;
iconActive:stop;
"
>
</a-entity>
<a-entity gui-item="type: icon-button; width: 0.75; height: 0.75;"
gui-interactable="clickAction: pauseMusic;"
gui-icon-button="
icon:stop;
"
>
</a-entity>
<a-entity gui-item="type: icon-button; height: 0.75;"
gui-interactable="clickAction: testButtonAction;"
gui-icon-button="
icon:social-github;
"
>
</a-entity>
</a-entity>
<!--<a-entity id="horizontal_button_row"
gui-item="type: flex-container; width: 3.8; height: 1.5;"
gui-flex-container="flexDirection: row; justifyContent: center; alignItems: flexEnd; opacity: 0.3;">
<a-entity id="type_cinematic"
gui-item="type: button; width: 0.75; height: 0.75; margin: 0 0.1 0 0.1"
gui-interactable="clickAction: selectCinematic;"
gui-button="
text:A;
fontFamily:'Fira Sans';
"
>
</a-entity>
<a-entity id="type_classic_rock"
gui-item="type: button; width: 0.75; height: 0.75; margin: 0 0.1 0 0.1"
gui-interactable="clickAction: selectClassicRock;"
gui-button="
text:B;
fontFamily:'Fira Sans';
"
>
</a-entity>
<a-entity id="type_modern_folk"
gui-item="type: button; width: 0.75; height: 0.75; margin: 0 0.1 0 0.1"
gui-interactable="clickAction: selectModernFolk;"
gui-button="
text:C;
fontFamily:'Fira Sans';
"
>
</a-entity>
</a-entity> -->
</a-gui-flex-container>
<a-entity id="musicPlayer" geometry="primitive: plane" material="color: blue"
position="0 0 0" scale="0.001 0.001 0.001" sound=""></a-entity>
<!-- 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>
</body>
</html>