aframe-babia-components
Version:
A data visualization set of components for A-Frame.
275 lines (239 loc) • 9.64 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame CodeCity Component - Basic</title>
<meta name="description" content="Basic example for CodeCity component.">
</meta>
<script src="https://aframe.io/releases/1.0.4/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="../../../dist/aframe-babia-components.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.0.0/dist/aframe-environment-component.min.js"></script>
<script
src="https://unpkg.com/aframe-geometry-merger-component/dist/aframe-geometry-merger-component.min.js"></script>
</head>
<body>
<a-scene id="scene">
<a-entity environment="playArea: 2"></a-entity>
<!--a-entity id="cityevolve" codecity='width: 60; depth: 50; algorithm: pivot;
extra: 1.05; streets: true;
base_thick: .1; streets_thick: .1;
streets_width: 1; border: 1;
absolute: true; quarter_elevation: .1;
' position="-0 0 -3"></a-entity-->
<a-entity position="0 0 -3" babia-city='width: 20; depth: 20; streets: true; color: green;
extra: 1.5; base_thick: 0.3; split: naive; fmaxarea: area;
data:
{"id": "Root",
"children":
[{"id": "BlockA",
"children": [{"id": "BlockA0",
"children": [{"id": "A0A", "area": 2, "height": 1}]},
{"id": "BlockA1",
"children": [{"id": "A1A", "area": 2, "height": 1},
{"id": "A1B", "area": 5, "height": 4},
{"id": "A1C", "area": 4, "height": 6},
{"id": "A1D", "area": 6, "height": 2}]},
{"id": "BlockA2",
"children": [{"id": "A2A", "area": 1, "height": 3},
{"id": "A2B", "area": 5, "height": 6},
{"id": "A2C", "area": 8, "height": 4}]},
{"id": "BlockA3",
"children": [{"id": "A3A", "area": 4, "height": 7},
{"id": "A3B", "area": 5, "height": 3},
{"id": "A3C", "area": 8, "height": 1}]}
]},
{"id": "BlockB",
"children": [{"id": "BlockB1",
"children": [{"id": "B1A", "area": 3, "height": 5},
{"id": "B1B", "area": 5, "height": 4},
{"id": "B1C", "area": 1, "height": 3},
{"id": "B1D", "area": 6, "height": 2},
{"id": "B1E", "area": 4, "height": 6},
{"id": "B1F", "area": 3, "height": 1},
{"id": "B1G", "area": 2, "height": 5},
{"id": "B1H", "area": 1, "height": 3}]},
{"id": "BlockB2",
"children": [{"id": "B2A", "area": 2, "height": 9},
{"id": "B2B", "area": 6, "height": 3},
{"id": "B2C", "area": 1, "height": 3},
{"id": "B2D", "area": 8, "height": 1},
{"id": "B2E", "area": 3, "height": 6},
{"id": "B2F", "area": 1, "height": 7}]},
{"id": "Block3",
"children": [{"id": "B3A", "area": 6, "height": 2},
{"id": "B3B", "area": 8, "height": 4},
{"id": "B3C", "area": 3, "height": 6}]},
{"id": "Block4",
"children": [{"id": "B4A", "area": 2, "height": 9},
{"id": "B4B", "area": 6, "height": 1},
{"id": "B4C", "area": 7, "height": 6},
{"id": "B4D", "area": 8, "height": 5},
{"id": "B4E", "area": 3, "height": 6},
{"id": "B4F", "area": 9, "height": 4}]},
{"id": "Block5",
"children": [{"id": "B5A", "area": 2, "height": 9},
{"id": "B5B", "area": 6, "height": 3},
{"id": "B5C", "area": 5, "height": 8},
{"id": "B5D", "area": 5, "height": 7}]},
{"id": "Block6",
"children": [{"id": "B6A", "area": 2, "height": 9},
{"id": "B6B", "area": 6, "height": 3},
{"id": "B6C", "area": 2, "height": 6},
{"id": "B6D", "area": 4, "height": 1},
{"id": "B6E", "area": 6, "height": 6},
{"id": "B6F", "area": 1, "height": 7},
{"id": "B6G", "area": 4, "height": 3},
{"id": "B6H", "area": 2, "height": 5},
{"id": "B6I", "area": 7, "height": 1},
{"id": "B6J", "area": 3, "height": 2},
{"id": "B6K", "area": 1, "height": 3}]}
]}
]
}'></a-entity>
<a-entity movement-controls="fly: true" position="0 1.2 12">
<a-entity camera position="0 3 4" look-controls></a-entity>
<a-entity laser-controls raycaster="objects: .babiaxraycasterclass, #navbarpopup, #navbarpopup--close-icon, #iteractionpopup, #iteractionpopup--close-icon,
#cityinformation, #cityinformation--close-icon"></a-entity>
<a-entity cursor="rayOrigin:mouse" raycaster="objects: .babiaxraycasterclass, #navbarpopup, #navbarpopup--close-icon, #iteractionpopup, #iteractionpopup--close-icon,
#cityinformation, #cityinformation--close-icon"></a-entity>
<a-entity></a-entity>
</a-entity>
</a-scene>
<style>
.gitlab-corner-wrapper {
overflow: hidden;
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0
}
.gitlab-corner {
position: absolute;
top: -16px;
right: -50px;
transform: rotate(45deg);
background: #548;
border: 44px solid #548;
border-bottom: none;
border-top: #548 solid 16px
}
.gitlab-corner svg {
width: 60px;
height: 60px;
margin-bottom: -4px
}
.cls-1 {
fill: #fc6d26
}
.cls-2 {
fill: #e24329
}
.cls-3 {
fill: #fca326
}
.gitlab-corner:hover .cls-1 {
animation: cycle .6s
}
.gitlab-corner:hover .cls-2 {
animation: cycleMid .6s
}
.gitlab-corner:hover .cls-3 {
animation: cycleEnd .6s
}
@keyframes cycle {
100%,
15%,
60% {
fill: #fc6d26
}
30%,
75% {
fill: #e24329
}
45%,
90% {
fill: #fca326
}
}
@keyframes cycleMid {
100%,
15%,
60% {
fill: #e24329
}
30%,
75% {
fill: #fca326
}
45%,
90% {
fill: #fc6d26
}
}
@keyframes cycleEnd {
100%,
15%,
60% {
fill: #fca326
}
30%,
75% {
fill: #fc6d26
}
45%,
90% {
fill: #e24329
}
}
@media (max-width:500px) {
.gitlab-corner:hover .cls-1,
.gitlab-corner:hover .cls-2,
.gitlab-corner:hover .cls-3 {
animation: none
}
.gitlab-corner .cls-1 {
animation: cycle .6s
}
.gitlab-corner .cls-2 {
animation: cycleMid .6s
}
.gitlab-corner .cls-3 {
animation: cycleEnd .6s
}
}
</style>
<div class="gitlab-corner-wrapper"><a href="https://gitlab.com/babiaxr/aframe-babia-components" class="gitlab-corner"
aria-label="View source on GitLab"><svg id="logo_art" data-name="logo art" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 586 559">
<g id="g44">
<path id="path46" class="cls-1"
d="M461.17,301.83l-18.91-58.12L404.84,128.43a6.47,6.47,0,0,0-12.27,0L355.15,243.64H230.82L193.4,128.43a6.46,6.46,0,0,0-12.26,0L143.78,243.64l-18.91,58.19a12.88,12.88,0,0,0,4.66,14.39L293,435,456.44,316.22a12.9,12.9,0,0,0,4.73-14.39" />
</g>
<g id="g48">
<path id="path50" class="cls-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z" />
</g>
<g id="g56">
<path id="path58" class="cls-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z" />
</g>
<g id="g64">
<path id="path66" class="cls-3"
d="M143.75,243.69h0l-18.91,58.12a12.88,12.88,0,0,0,4.66,14.39L293,435,143.75,243.69Z" />
</g>
<g id="g72">
<path id="path74" class="cls-2" d="M143.78,243.69h87.11L193.4,128.49a6.47,6.47,0,0,0-12.27,0l-37.35,115.2Z" />
</g>
<g id="g76">
<path id="path78" class="cls-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z" />
</g>
<g id="g80">
<path id="path82" class="cls-3"
d="M442.24,243.69h0l18.91,58.12a12.85,12.85,0,0,1-4.66,14.39L293,434.91l149.2-191.22Z" />
</g>
<g id="g84">
<path id="path86" class="cls-2" d="M442.28,243.69h-87.1l37.42-115.2a6.46,6.46,0,0,1,12.26,0l37.42,115.2Z" />
</g>
</svg></a></div>
</body>
</html>