aframe-babia-components
Version:
A data visualization set of components for A-Frame.
88 lines (74 loc) • 3.39 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Async-Await</title>
<meta name="description" content="Async-Await test" />
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script>
<script
src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script>
<script
src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
<script src="../../dist/aframe-babia-components.js"></script>
</head>
<body>
<a-scene background="color: #A8F3FF" id="AframeScene">
<a-entity environment="preset: yavapai; skyType: color; skyColor: #358DF8 "></a-entity>
<a-light type="point" intensity="1" position="0 5 0"></a-light>
<a-entity id="querier" babia-async-querier="url: ./data_vaccination_2.json"></a-entity>
<a-entity id="vis1" async-visualizer="from: querier" position="0 -5 0">
</a-entity>
<a-entity id="vis2" async-visualizer="from: querier" position="0 0 0">
</a-entity>
<a-entity movement-controls="fly: true" position="0 5 0" rotation="0 180 0">
<a-entity camera position="0 0 0" look-controls></a-entity>
<a-entity cursor="rayOrigin:mouse"></a-entity>
<a-entity laser-controls="hand: right"></a-entity>
</a-entity>
</a-scene>
<script>
let querier = document.getElementById("querier");
changeFrom();
addVisualizer();
async function changeFrom() {
for (let i = 0; i < 10; i++) {
await delay3()
if (i == 0 || i % 2 == 0) {
querier.setAttribute('babia-async-querier', { 'url': './data_vaccination_1.json' });
console.log("Url: " + querier.getAttribute('babia-async-querier')['url'])
} else {
querier.setAttribute('babia-async-querier', { 'url': './data_vaccination_2.json' });
console.log("Url: " + querier.getAttribute('babia-async-querier')['url'])
}
}
}
async function addVisualizer(){
for (let i = 3; i < 7; i++) {
await delay10();
let new_vis = document.createElement("a-entity");
let id = `vis_${i}`;
new_vis.setAttribute("id", id);
new_vis.setAttribute("async-visualizer", "from", "querier")
if (i == 3){
new_vis.setAttribute("position", "0 5 0");
} else if (i == 4){
new_vis.setAttribute("position", "-10 -5 0");
}
else if (i == 5){
new_vis.setAttribute("position", "-10 0 0");
}
else if (i == 6){
new_vis.setAttribute("position", "-10 5 0");
}
document.getElementById("AframeScene").appendChild(new_vis);
}
}
function delay3() {
return new Promise(resolve => setTimeout(resolve, 3000));
}
function delay10() {
return new Promise(resolve => setTimeout(resolve, 10000));
}
</script>
</body>
</html>