aframe-babia-components
Version:
A data visualization set of components for A-Frame.
55 lines (40 loc) • 2.51 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Babia Bars with Axis Names</title>
<meta name="description" content="Example of babia-bars adding axis with their names" />
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>
<script src="https://unpkg.com/aframe-teleport-controls/dist/aframe-teleport-controls.min.js"></script>
<script
src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
<script src="../../../dist/aframe-babia-components.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.2.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene id="AframeScene">
<a-assets>
<a-asset-item id="optimerBoldFont"
src="https://rawgit.com/mrdoob/three.js/dev/examples/fonts/optimer_bold.typeface.json"></a-asset-item>
</a-assets>
<a-entity environment></a-entity>
<a-light type="ambient" intensity="0.5" position="-30 20 30"></a-light>
<a-entity id="rig" position="-2.5 2.5 0" networked="template:#rig-template; attachTemplateToLocal:false">
<a-entity id="camera" camera look-controls wasd-controls="fly: false"></a-entity>
<!-- Hand Controls -->
<a-entity id="leftHand" oculus-touch-controls="hand: left"
teleport-controls="cameraRig: #rig; teleportOrigin: #avatar; collisionEntities: #environmentGround;
hitCylinderColor: #ff3468; curveHitColor: #ff3468; curveMissColor: #333333; curveLineWidth: 0.01; button: trigger"></a-entity>
<a-entity id="rightHand" laser-controls="hand: right" oculus-touch-controls="hand: right"
raycaster="objects: .babiaxraycasterclass, #audio_button, #color_button"></a-entity>
<a-entity id="cursor" cursor="rayOrigin:mouse" raycaster="objects: .babiaxraycasterclass"></a-entity>
</a-entity>
<a-entity id="querierData" babia-queryjson="url: ./data2.json;"></a-entity>
<a-entity id="barsmap" babia-barsmap='x_axis: name; z_axis: age; height: height; legend: true; axis: true; axis_name: true; palette: pearl;
title: babia-barsmap; from: querierData' position="-5 1 -7" rotation="0 0 0" scale="0.4 0.4 0.4">
</a-entity>
</a-entity>
</a-scene>
</script>
</body>
</html>