a video in an aframe scene
🙏 @utopiah for being my A-Frame sherpa 😄
all the blocks with thumbnail images created during the 2016 #d3unconf
here we use aframe’s a-boxes, which are kind of like SVG rects
a fork of aframe + d3 + bl.ocks from @donrmccurdy
falling blocks brought to you by the aframe-physics-system, also from @donrmccurdy
inspired by the conversations at the 3d and VR 11am session in the Alcatraz Room at the 2016 d3 unconference
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
<title>A-Frame / Bl.ocks / D3</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.js"></script>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js"></script>
<script src="aframe-extras.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video id="gooey-exploding-scatterplot" autoplay loop="true" src="https://storage.googleapis.com/blocks-on-a-boxes.appspot.com/05-gooey-exploding-scatterplot.mp4">
</a-assets>
<!-- Using the asset management system. -->
<a-video src="#gooey-exploding-scatterplot" width="16" height="9" position="0 0 -20"></a-video>
</a-scene>
<script>
</script>
</body>
</html>