<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cursor</title>
<meta name="description" content="Cursor - A-Frame">
<script src="../../../dist/aframe-master.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@4.1.2/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene background="color: #FBE0D8">
<a-assets>
<audio id="blip1" src="../../showcase/anime-UI/audio/321103__nsstudios__blip1.wav"></audio>
<audio id="blip2" src="../../showcase/anime-UI/audio/321104__nsstudios__blip2.wav"></audio>
<audio id="shot" src="shot.ogg"></audio>
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
<a-mixin id="hoverColor" event-set__mouseenter="material.color: #CC435F"></a-mixin>
<a-mixin id="selectColor" event-set__click="material.color: #876A96"></a-mixin>
<a-mixin id="leaveColor" event-set__mouseleave="material.color: #9DE0AD"></a-mixin>
<a-mixin id="red" material="color: #F35F5F"></a-mixin>
<a-mixin id="green" material="color: #9DE0AD"></a-mixin>
<a-mixin id="blue" material="color: #36A3EB"></a-mixin>
<a-mixin id="yellow" material="color: #F1EA65"></a-mixin>
<a-mixin id="sphere" geometry="primitive: sphere"></a-mixin>
</a-assets>
<a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .intersectable"></a-entity>
<a-entity position="0 .6 4">
<a-camera>
<a-entity raycaster="far: 30; objects: .intersectable"
cursor
geometry="primitive: ring; radiusOuter: 0.015;
radiusInner: 0.01; segmentsTheta: 32"
material="color: #283644; shader: flat"
position="0 0 -0.75"></a-entity>
</a-camera>
</a-entity>
<a-entity position="-3.5 1 0">
<a-entity mixin="red cube"
class="intersectable"
animation="startEvents: click; property: position; from: 0 0 0; to: 0 0 -10; dur: 2000">
</a-entity>
</a-entity>
<a-entity position="0 1 1">
<a-entity id="invisibleCube"
mixin="cube"
material="color: grey; opacity: 0.3; transparent: true"
scale="1 1 0.1"
animation="startEvents: click; property: rotation; to: 0 360 0; easing: linear; dur: 2000">
</a-entity>
</a-entity>
<a-entity position="0 1 0">
<a-entity id="foregroundCube"
class="intersectable"
mixin="green cube hoverColor selectColor leaveColor"
sound__1="on: click; src: #blip1"
sound__2="on: mouseenter; src: #blip2"
animation="startEvents: click; property: rotation; to: 0 360 0; easing: linear; dur: 2000">
</a-entity>
</a-entity>
<a-entity position="1 1 0">
<a-entity mixin="yellow cube"
sound__1="on: click; src: #shot; poolSize: 6"
sound__2="src: #blip2; autoplay: true"
animation="startEvents: click; property: scale; to: 1.2 1.2 1.2; easing: linear; dur: 200">
</a-entity>
</a-entity>
<a-entity position="0 1 -3">
<a-entity id="backgroundCube"
class="intersectable"
mixin="green cube"
animation="startEvents: click; property: rotation; to: 0 360 0; easing: linear; dur: 2000">
</a-entity>
</a-entity>
<a-entity position="3.5 1 0" rotation="0 45 0">
<a-entity mixin="blue cube"
class="intersectable"
animation="startEvents: click; loop: 1; dir: alternate; property: position; from: 0 0 0; to: 15 0 0; dur: 2000">
</a-entity>
</a-entity>
<a-entity mixin="yellow cube" position="0 3 -3" class="intersectable clickable" rotation="0 45 0" scale=".5 .5 .5"></a-entity>
</a-scene>
</body>
</html>
