| 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> |