<!DOCTYPE html>
<html>
  <head>
    <title>Click to rotate</title>
    <script src="https://aframe.io/releases/1.2.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@4.2.1/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>
    <script src="../js/livecode.js"></script>
  </head>
  <body>
    <a-scene cursor="rayOrigin: mouse" environment="preset: forest; playArea: 10">
      <a-box
        id="controlled"
        position="0 2 -3"
        color="green"
        animation__red="property: rotation; to: 0 45 0; startEvents: clickred"
        animation__blue="property: rotation; to: 0 -45 0; startEvents: clickblue"
      ></a-box>

      <a-box
        color="red"
        position="-0.5 1.6 -1"
        width="0.1"
        height="0.1"
        depth="0.1"
        proxy-event="event: click; to: #controlled; as: clickred"
      ></a-box>
      <a-box
        color="blue"
        position="0.5 1.6 -1"
        width="0.1"
        height="0.1"
        depth="0.1"
        proxy-event="event: click; to: #controlled; as: clickblue"
      ></a-box>
    </a-scene>
  </body>
</html>