D3 Examples - aframe + d3 test

aframe + d3 test

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.

xxxxxxxxxx
 
<!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>
​
    