<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cubes</title>
<meta name="description" content="Cubes - A-Frame">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene background="color: #ECECEC">
<a-assets>
<a-mixin id="box" geometry="depth: 0.1; height: 0.1; width: 0.1"></a-mixin>
<a-mixin id="frame-edge" geometry="primitive: box; depth: 10; height: 0.1; width: 0.1"
material="color: #404040"></a-mixin>
<img id="shadow" src="../../assets/img/radial-shadow-2.png">
<img id="texture" src="http://i.imgur.com/6qHKYGf.png" crossorigin>
</a-assets>
<a-entity position="0 0 -11" rotation="0 45 0">
<a-box src="#texture" position="-5 0 -2" width="1" color="#F16745"></a-box>
<a-box height="2" color="#FFC65D"></a-box>
<a-box position="5 0 2" depth="5" color="#7BC8A4"></a-box>
<a-box position="5 5 -5" width="1" height="2" depth="22" color="#4CC3D9"></a-box>
<a-box position="1 2 1" width="1" height="1" depth="1" color="#93648D"></a-box>
<a-box position="-3 0 0" width="0.5" height="10" depth="0.5" color="#404040"></a-box>
<a-entity position="-2 5 4" scale="0.15 0.15 0.15">
<a-entity mixin="frame-edge" position="5 5 0" ></a-entity>
<a-entity mixin="frame-edge" position="5 -5 0" ></a-entity>
<a-entity mixin="frame-edge" position="-5 5 0" ></a-entity>
<a-entity mixin="frame-edge" position="-5 -5 0" ></a-entity>
<a-entity mixin="frame-edge" position="0 5 5" rotation="0 90 0"></a-entity>
<a-entity mixin="frame-edge" position="0 5 -5" rotation="0 90 0"></a-entity>
<a-entity mixin="frame-edge" position="0 -5 5" rotation="0 90 0"></a-entity>
<a-entity mixin="frame-edge" position="0 -5 -5" rotation="0 90 0"></a-entity>
<a-entity mixin="frame-edge" position="5 0 5" rotation="90 0 0"></a-entity>
<a-entity mixin="frame-edge" position="5 0 -5" rotation="90 0 0"></a-entity>
<a-entity mixin="frame-edge" position="-5 0 5" rotation="90 0 0"></a-entity>
<a-entity mixin="frame-edge" position="-5 0 -5" rotation="90 0 0"></a-entity>
</a-entity>
<a-entity id="bits" position="-6 -1 0">
<a-box mixin="box" position="0 -0.2 0" color="#4CC3D9"></a-box>
<a-box mixin="box" position="0.5 -0.2 0.5" color="#93648D"></a-box>
<a-box mixin="box" position="0 0 2" color="#7BC8A4"></a-box>
<a-box mixin="box" position="-0.5 -0,5 3" color="#FFC65D"></a-box>
<a-box mixin="box" position="0 0 4" color="#F16745"></a-box>
<a-box mixin="box" position="-0.2 -0.4 5" color="#FFC65D"></a-box>
<a-box mixin="box" position="0 0 6" color="#4CC3D9"></a-box>
<a-box mixin="box" position="0.2 0 7" color="#93648D"></a-box>
</a-entity>
</a-entity>
<!-- Cube shadow -->
<a-image id="shadow" position="0 -14 0" src="#shadow" opacity="1" rotation="-90 0 0"
scale="14 14 14"></a-image>
</a-scene>
</body>
</html>
