Skip to content

Instantly share code, notes, and snippets.

@nlinc1905

nlinc1905/index.html

Created February 27, 2018 01:03
Show Gist options
  • Save nlinc1905/5fb08432eeab086edbbc91ac9aceb367 to your computer and use it in GitHub Desktop.
Save nlinc1905/5fb08432eeab086edbbc91ac9aceb367 to your computer and use it in GitHub Desktop.
Download ZIP
3D Network Graph in Virtual Reality
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene>
<a-camera>
<a-cursor color="gray"></a-cursor>
</a-camera>
<a-text value="Alpha" color="red" position="-1 0 -15" scale="3 3 3"></a-text>
<a-sphere color="red" radius="1" position="0 -2 -15" event-set__mouseenter="scale: 1.5 1.5 1.5" event-set__mouseleave="scale: 1 1 1"></a-sphere>
<a-text value="Beta" color="red" position="0 10 -15" scale="3 3 3"></a-text>
<a-sphere color="red" radius="1" position="1 8 -15" event-set__mouseenter="scale: 1.5 1.5 1.5" event-set__mouseleave="scale: 1 1 1"></a-sphere>
<a-text value="Gamma" color="red" position="-6 8 -12" scale="3 3 3"></a-text>
<a-sphere color="red" radius="1" position="-5 6 -12" event-set__mouseenter="scale: 1.5 1.5 1.5" event-set__mouseleave="scale: 1 1 1"></a-sphere>
<a-text value="Delta" color="green" position="-13 -2 -10" scale="3 3 3"></a-text>
<a-sphere color="green" radius="1" position="-12 -4 -10" event-set__mouseenter="scale: 1.5 1.5 1.5" event-set__mouseleave="scale: 1 1 1"></a-sphere>
<a-text value="Epsilon" color="blue" position="19 15 -20" scale="3 3 3"></a-text>
<a-sphere color="blue" radius="1" position="20 13 -20" event-set__mouseenter="scale: 1.5 1.5 1.5" event-set__mouseleave="scale: 1 1 1"></a-sphere>
<a-text value="Zeta" color="orange" position="9 -5 -5" scale="3 3 3"></a-text>
<a-sphere color="orange" radius="1" position="10 -7 -5" event-set__mouseenter="scale: 1.5 1.5 1.5" event-set__mouseleave="scale: 1 1 1"></a-sphere>
<a-text value="Eta" color="blue" position="22 0 -15" scale="3 3 3"></a-text>
<a-sphere color="blue" radius="1" position="23 -2 -15" event-set__mouseenter="scale: 1.5 1.5 1.5" event-set__mouseleave="scale: 1 1 1"></a-sphere>
<a-text value="Theta" color="red" position="8 3 -12" scale="3 3 3"></a-text>
<a-sphere color="red" radius="1" position="9 1 -12" event-set__mouseenter="scale: 1.5 1.5 1.5" event-set__mouseleave="scale: 1 1 1"></a-sphere>
<a-entity line="start: 0 -2 -15; end: 1 8 -15; color: gray;"></a-entity>
<a-entity line="start: 0 -2 -15; end: -5 6 -12; color: gray;"></a-entity>
<a-entity line="start: 0 -2 -15; end: -12 -4 -10; color: gray;"></a-entity>
<a-entity line="start: 0 -2 -15; end: 9 1 -12; color: gray;"></a-entity>
<a-entity line="start: 1 8 -15; end: -5 6 -12; color: gray;"></a-entity>
<a-entity line="start: 1 8 -15; end: 10 -7 -5; color: gray;"></a-entity>
<a-entity line="start: 1 8 -15; end: 9 1 -12; color: gray;"></a-entity>
<a-entity line="start: 20 13 -20; end: 23 -2 -15; color: gray;"></a-entity>
<a-entity line="start: 20 13 -20; end: 9 1 -12; color: gray;"></a-entity>
<a-entity line="start: 10 -7 -5; end: 23 -2 -15; color: gray;"></a-entity>
<a-entity line="start: 10 -7 -5; end: 9 1 -12; color: gray;"></a-entity>
<a-entity line="start: 23 -2 -15; end: 9 1 -12; color: gray;"></a-entity>
</a-scene>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment