aframe-gui
Version:
A-Frame GUI components
172 lines (161 loc) • 4.44 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame GUI Call</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<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="iconfontsolid" src="assets/fonts/fa-solid-900.ttf"></a-asset-item>
<a-asset-item id="textfont1" src="assets/fonts/PermanentMarker-Regular.ttf"></a-asset-item>
<a-asset-item id="textfont2" src="assets/fonts/Plaster-Regular.ttf"></a-asset-item>
</a-assets>
<a-gui-flex-container
flex-direction="column" justify-content="center" align-items="normal" component-padding="0.1"
opacity="0.7" width="3" height="2"
position="-1.75 2 -5" rotation="0 0 0"
>
<a-gui-label width="2.5" height="0.75"
value="Time to Call A Friend!"
font-family="assets/fonts/PermanentMarker-Regular.ttf"
font-size="0.2"
>
</a-gui-label>
<a-gui-input width="3" height="0.75"
onclick="testInputAction"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.2"
value="212 432 1234_"
>
</a-gui-input>
</a-gui-flex-container>
<a-gui-flex-container
flex-direction="column" justify-content="center" align-items="normal" component-padding="0.1"
opacity="0.7" width="0.75" height="3"
position="0.75 1.75 -5" rotation="0 0 0"
>
<a-gui-button
width="0.75" height="0.75"
onclick="clickOne"
value="1"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
<a-gui-button
width="0.75" height="0.75"
onclick="clickFour"
value="4"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
<a-gui-button
width="0.75" height="0.75"
onclick="clickSeven"
value="7"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
<a-gui-icon-button
height="0.75"
onclick="clear"
icon="f2ed"
icon-font="assets/fonts/fa-solid-900.ttf"
>
</a-gui-icon-button>
</a-gui-flex-container>
<a-gui-flex-container
flex-direction="column" justify-content="center" align-items="normal" component-padding="0.1"
opacity="0.7" width="0.75" height="3"
position="1.5 1.75 -5" rotation="0 0 0"
>
<a-gui-button
width="0.75" height="0.75"
onclick="clickTwo"
value="2"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
<a-gui-button
width="0.75" height="0.75"
onclick="clickFive"
value="5"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
<a-gui-button
width="0.75" height="0.75"
onclick="clickEight"
value="8"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
<a-gui-button
width="0.75" height="0.75"
onclick="clickZero"
value="0"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
</a-gui-flex-container>
<a-gui-flex-container
flex-direction="column" justify-content="center" align-items="normal" component-padding="0.1"
opacity="0.7" width="0.75" height="3"
position="2.25 1.75 -5" rotation="0 0 0"
>
<a-gui-button
width="0.75" height="0.75"
onclick="clickThree"
value="3"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
<a-gui-button
width="0.75" height="0.75"
onclick="clickSix"
value="6"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
<a-gui-button
width="0.75" height="0.75"
onclick="clickNine"
value="9"
font-family="assets/fonts/Plaster-Regular.ttf"
font-size="0.4"
>
</a-gui-button>
<a-gui-icon-button
height="0.75"
onclick="call"
icon="f095"
icon-font="assets/fonts/fa-solid-900.ttf"
>
</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="cross"
>
</a-gui-cursor> <!-- /cursor -->
</a-camera> <!-- /camera -->
</a-entity>
</a-scene>
</body>
</html>