<!DOCTYPE html>
<html>
<head>
<title>Interactions - 12 - Hands and Laser</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component/dist/aframe-event-set-component.min.js"></script>
<script src="../js/livecode.js"></script>
</head>
<body>
<a-scene>
<a-entity environment="preset: tron; dressingAmount: 20; fog: 0"></a-entity>
<a-box class="links"
id="box"
position="0 1 -1"
color="red"
scale="0.5 0.5 0.5"
event-set__mouseenter="color: lightblue"
event-set__click="color: blue"
event-set__mouseleave="color: red"
></a-box>
<a-entity id="rightHand"
hand-controls="hand: right; handModelStyle: lowPoly"
event-set__pointingstart="_target: #ray; raycaster.enabled:true; raycaster.showLine:true"
event-set__pointingend="_target: #ray; _delay: 1000; raycaster.enabled:false; raycaster.showLine:false">
<a-box id="ray" position="0.025 0.03 -0.1" scale="0.1 0.1 0.1" opacity="0" cursor raycaster="showLine: false; enabled:false"></a-box>
</a-entity>
</a-scene>
</body>
</html>