figures-01/fourth-mouse.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
<!--    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> -->
    <script src="../assets/js/aframe.min.js"></script>
  </head>
  <body>
    <a-scene background="color: grey">
      <a-assets>
        <img id="molinos" src="../assets/imgs/molinos-bw.jpg">
        <img id="soil" src="../assets/imgs/soil.jpg">
        <img id="bands" src="../assets/imgs/bands.jpg">
      </a-assets>

      <a-box position="3.5 1 -3" rotation="0 90 0" scale="2 2 2" src="#molinos"
             animation="property: position; to: 5.5 1 -5;
                        dir: alternate; dur: 4000;
                        loop: true">
      </a-box>
      <a-sphere position="-2 1.25 -5" radius="1.25" src="#soil"></a-sphere>
      <a-cylinder position="1 1.25 -3" radius="0.5" height="2.5"
                  src="#bands"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="4"
               repeat="4 2" src="#soil"></a-plane>
      <a-entity
        geometry="primitive: plane; width: 4; height: auto"
        position="0 3 -3"
        material="color: red"
        font="./assets/Roboto-msdf.json"
        text="value: This is another test"></a-entity>

      <a-sky color="grey"></a-sky>

      <a-light type="ambient" color="grey"></a-light>
      <a-light type="point" intensity="2" position="-2 2 4"></a-light>

      <a-entity position="-3 1 1" rotation="0 -25 0">
        <a-camera cursor="rayOrigin:mouse">
        </a-camera>
      </a-entity>

    </a-scene>

    <script>
    var sphere = document.querySelector('a-sphere');
    sphere.addEventListener('mouseenter', function () {
      sphere.setAttribute('scale', {x: 1.2, y: 1.2, z: 1.2});
    });
    sphere.addEventListener('mouseleave', function () {
      sphere.setAttribute('scale', {x: 1, y: 1, z: 1});
    });
    </script>
  </body>
</html>