Skip to content

Instantly share code, notes, and snippets.

@tonyhschu
Last active October 18, 2016 00:49
Show Gist options
  • Save tonyhschu/b8f0af1b476bedad3460e22777637a30 to your computer and use it in GitHub Desktop.
Save tonyhschu/b8f0af1b476bedad3460e22777637a30 to your computer and use it in GitHub Desktop.
aframe + d3 test
license: mit

Testing out aframe.io with d3.js.

Since AFrame works with DOM elements, you can use d3's selection API to generate and modify 3D elements, as well as handle "mouse" events (including the VR friendly "fuse cursor") as if it was SVG.

Built with blockbuilder.org

forked from enjalot's block: aframe + d3 test

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background-color: white;}
</style>
</head>
<body>
<a-scene>
<a-sphere position="0 1.25 -5" radius="1.95" color="#EF2D5E"></a-sphere>
<a-cone color="tomato" radius-bottom="2" radius-top="1"></a-cone>
<a-cylinder color="crimson" height="1" radius="1.5"></a-cylinder>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment