Experiment page: almossawi.com/aframe-d3-visualization
GitHub repo: github.com/almossawi/aframe-d3-visualization
June 17, 2016
forked from almossawi's block: Flying Over the UK -- aframe [UNLISTED]
xxxxxxxxxx
<html>
<meta charset='utf-8'>
<head>
<script src='//aframe.io/releases/0.2.0/aframe.min.js'></script>
<script src='//d3js.org/d3.v3.min.js'></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
<a-scene fog='type: linear; color: #fff; far: 180; near: 0'>
<!-- plane -->
<a-plane rotation='-90 0 0' position='50 0 200' width='800' height='800' color='black'></a-plane>
<!-- lighting -->
<a-entity light='type: ambient; color: #CCC'></a-entity>
<!-- camera and sky -->
<a-entity class='hand-of-frog' position='50 21 0' rotation='0 -170 0'>
<a-animation attribute='rotation'
dur='4000'
fill='forwards'
from='0 -169.7 0'
to='0 -170.3 0'
direction='alternate'
repeat='indefinite'>
</a-animation>
<a-animation attribute='position'
begin='change-camera'
dur='2000'
fill='forwards'
from='50 21 0'
to='50 1 0'
direction='alternate'
repeat='0'>
</a-animation>
<a-camera look-controls wasd-controls='easing:10'>
<a-animation attribute='position'
class='autopilot'
dur='50000'
fill='forwards'
from='0 0 0'
to='0 0 -200'
direction='alternate'
repeat='indefinite'
easing='ease-in-out-cubic'>
</a-animation>
<a-cursor color='#4CC3D9' fuse timeout='100'></a-cursor>
</a-camera>
</a-entity>
<a-sky color='#ECECEC' material='fog:false'></a-sky> <!-- fog='false' broken in 0.2 -->
</a-scene>
<div class='overlay'></div>
<div class='camera'>
<i class='camera-button fa fa fa-plane fa-2x' aria-hidden='true'></i>
</div>
<script src='main.js'></script>
</body>
</html>
https://aframe.io/releases/0.2.0/aframe.min.js
https://d3js.org/d3.v3.min.js