<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arms</title>
<meta name="description" content="Arms - A-Frame">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="background" src="black-grid.png">
</a-assets>
<a-entity position="0 0 4">
<a-camera></a-camera>
</a-entity>
<!-- Directly beneath the camera -->
<a-entity position="0 -10.1 -1" rotation="30 180 0">
<a-sphere radius="7" color="#7BC8A4"></a-sphere>
<a-entity animation="property: object3D.rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#7BC8A4"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1" color="#F16745"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 10 100; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="3" color="#4CC3D9"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="4.5" color="#FFC65D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#93648D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0">
<a-sphere radius="1.5" color="#FFF"></a-sphere>
</a-entity>
</a-entity>
</a-entity>
</a-entity> </a-entity>
</a-entity>
</a-entity>
<!-- Distant orbit -->
<a-entity rotation="120 40 0" scale="10 10 10">
<a-entity animation="property: rotation; to: 0 0 360; dur: 20000; easing: linear; loop: true">
<a-entity position="-18.25 -5 0" rotation="0 0 0">
<a-sphere radius="0.3" color="#7e3f1a"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
<a-entity position="0 10 0" rotation="0 0 -36">
<a-sphere radius="0.5" color="#372246"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
<a-entity position="0 10 0" rotation="0 0 -36">
<a-sphere radius="0.2" color="#7e3f1a"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
<a-entity position="0 10 0" rotation="0 0 -36">
<a-sphere radius="0.7" color="#372246"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
<a-entity position="0 10 0" rotation="0 0 -36">
<a-sphere radius="2" color="#7e3f1a"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
<a-entity position="0 10 0" rotation="0 0 -36">
<a-sphere radius="0.25" color="#7e3f1a"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
<a-entity position="0 10 0" rotation="0 0 -36">
<a-sphere radius="0.5" color="#7e3f1a"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
<a-entity position="0 10 0" rotation="0 0 -36">
<a-sphere radius="6" color="#7e3f1a"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
<a-entity position="0 10 0" rotation="0 0 -36">
<a-sphere radius="0.3" color="#372246"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
<a-entity position="0 10 0" rotation="0 0 -36">
<a-sphere radius="0.05" color="#7e3f1a"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.015" color="#7e3f1a"></a-cylinder>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
<a-entity animation="property: rotation; to: 360 0 0; dur: 50000; easing: linear; loop: true; dir: normal">
<a-entity position="0 -20 -50" animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#7BC8A4"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1" color="#F16745"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 10 100; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="3" color="#4CC3D9"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="4.5" color="#FFC65D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#93648D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0">
<a-sphere radius="1.5" color="#FFF"></a-sphere>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
<a-entity animation="property: rotation; to: 360 360 0; dur: 20000; easing: linear; loop: true; dir: normal">
<a-entity position="-20 0 100" animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#7BC8A4"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1" color="#F16745"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 10 100; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="3" color="#4CC3D9"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="4.5" color="#FFC65D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#93648D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0">
<a-sphere radius="1.5" color="#FFF"></a-sphere>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
<a-entity animation="property: rotation; to: -360 360 -360; dur: 30000; easing: linear; loop: true; dir: normal; fill: none">
<a-entity position="0 -20 50" animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#7BC8A4"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1" color="#F16745"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 10 100; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="3" color="#4CC3D9"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="4.5" color="#FFC65D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#93648D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0">
<a-sphere radius="1.5" color="#FFF"></a-sphere>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
<a-entity position="40 20 0" animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#7BC8A4"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1" color="#F16745"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 10 100; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="3" color="#4CC3D9"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="4.5" color="#FFC65D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#93648D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0">
<a-sphere radius="1.5" color="#FFF"></a-sphere>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
<a-entity position="-60 0 -60" animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#7BC8A4"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1" color="#F16745"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 10 100; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="3" color="#4CC3D9"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; loop: true; dir: alternate">
<a-sphere radius="4.5" color="#FFC65D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
<a-sphere radius="1.5" color="#93648D"></a-sphere>
<a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
<a-entity position="0 10 0">
<a-sphere radius="1.5" color="#FFF"></a-sphere>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
<a-sky src="#background"></a-sky>
<a-entity light="type: directional; color: #FFF; intensity: 0.5" position="-1 2 1"></a-entity>
<a-entity light="type: ambient; color: #461e06;"></a-entity>
</a-scene>
</body>
</html>
