<!DOCTYPE html>
<html>
  <head>
    <title>Interactions - 10</title>
    <script src="https://aframe.io/releases/1.5.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>
  </head>
  <body>
    <a-scene>
      <a-entity environment="preset: forest; fog: 0"></a-entity>
      <a-sky color="lightblue"></a-sky>
      <a-box
        id="box"
        position="0 1 -1"
        color="red"
        scale="0.3 0.3 0.3"
        event-set__mouseenter="color: lightblue"
        event-set__click="color: blue"
        event-set__mouseleave="color: red"
      ></a-box>

      <!-- 
        The laser-controls component wraps other platform specific controls, so it will look different depending on 
        whether you try this on a Quest, HTC, etc.
       -->
      <a-entity laser-controls="hand: right;" ></a-entity>

      <!-- don use both at the same time -->
     <!-- <a-entity laser-controls="hand: left;" ></a-entity> -->


    </a-scene>
  </body>
</html>