<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Raycaster</title>
<meta name="description" content="Raycaster - A-Frame">
<script src="../../../dist/aframe-master.js"></script>
<script src="components/intersect-color-change.js"></script>
<script src="components/entity-generator.js"></script>
<script src="components/raycaster-helper.js"></script>
</head>
<body>
<a-scene background="color: #ECECEC">
<a-assets>
<a-mixin id="box" geometry="primitive: box; depth: 0.1, height: 0.3; width: 0.1"
material="color: #DDD; opacity: 0.4; shader: flat"
intersect-color-change></a-mixin>
<a-mixin id="sphere" geometry="primitive: sphere; radius: 0.1"
material="color: #333; opacity: 0.4; shader: flat"
intersect-color-change></a-mixin>
<a-mixin id="finger" geometry="primitive: box; height: 0.02; width: 0.02; depth: 0.5"
material="side: double"></a-mixin>
<a-mixin id="raycaster" raycaster="objects: [mixin~='box']; recursive: false"
raycaster-helper material="opacity: 0.8"></a-mixin>
<a-mixin id="color1" material="color: #0B88A8"></a-mixin>
<a-mixin id="color2" material="color: #A6DC8C"></a-mixin>
<a-mixin id="color3" material="color: #DFEB95"></a-mixin>
<a-mixin id="color4" material="color: #095062"></a-mixin>
<a-mixin id="color5" material="color: #FCEFED"></a-mixin>
<a-mixin id="color6" material="color: #6173F4"></a-mixin>
<a-mixin id="color7" material="color: #3B2E40"></a-mixin>
<a-mixin id="color8" material="color: #F35E3E"></a-mixin>
</a-assets>
<a-entity geometry="primitive: plane; height: 50; width: 50"
material="color: #E2F3F5; shader: flat"
position="0 -1.8 0"
rotation="-90 0 0"></a-entity>
<a-entity>
<a-camera near=".2">
<a-entity id="left-hand" position="-0.5 -0.2 -0.5">
<a-entity mixin="color1 finger" position=".1 0 0" rotation="10 20 0">
<a-entity mixin="color1 raycaster"></a-entity>
</a-entity>
<a-entity mixin="color2 finger" position=".2 0 0" rotation="10 10 0">
<a-entity mixin="color2 raycaster"></a-entity>
</a-entity>
<a-entity mixin="color3 finger" position=".3 0 0" rotation="10 0 0">
<a-entity mixin="color3 raycaster"></a-entity>
</a-entity>
<a-entity mixin="color4 finger" position=".4 0 0" rotation="10 -10 0">
<a-entity mixin="color4 raycaster"></a-entity>
</a-entity>
</a-entity>
<a-entity id="right-hand" position="0 -0.2 -0.5">
<a-entity mixin="color5 finger" position=".1 0 0" rotation="10 10 0">
<a-entity mixin="color5 raycaster"></a-entity>
</a-entity>
<a-entity mixin="color6 finger" position=".2 0 0" rotation="10 0 0">
<a-entity mixin="color6 raycaster"></a-entity>
</a-entity>
<a-entity mixin="color7 finger" position=".3 0 0" rotation="10 -10 0">
<a-entity mixin="color7 raycaster"></a-entity>
</a-entity>
<a-entity mixin="color8 finger" position=".4 0 0" rotation="10 -20 0">
<a-entity mixin="color8 raycaster"></a-entity>
</a-entity>
</a-entity>
</a-camera>
</a-entity>
<a-entity position="0 10 0" entity-generator="mixin: box"
animation="property: position; dur: 16000; easing: linear; loop: false; to: 0 0 0"></a-entity>
<a-entity position="0 10 0" entity-generator="mixin: sphere"
animation="property: position; dur: 16000; easing: linear; loop: false; to: 0 0 0"></a-entity>
</a-scene>
</body>
</html>
