A-Frame how to continue animation from last place?

S

Sergey2017-04-25 10:37:21

JavaScript

Sergey, 2017-04-25 10:37:21

There is a VR demo on the A-Frame framework. When you hover over the model, the latter begins to rotate endlessly, when you move the cursor away from the model, the animation stops. How to make it so that when the cursor is refocused, the model continues to rotate from its last position? Now it jerks up to its original position and only then begins to rotate.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>VR Demo</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>

<body>
  <a-scene>

    <a-assets>
      <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      <img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
      <img id="pedestalTexture" src="/assets/metal.jpg">
      <audio src="assets/music.mp3" autoplay
      preload loop></audio>
      <a-asset-item id="avent" src="/assets/avent.obj"></a-asset-item>
      <a-asset-item id="avent_texture" src="/assets/avent.mtl"></a-asset-item>
    </a-assets>

    <a-entity id="car" obj-model="obj:#avent;mtl:#avent_texture" scale="1 1 1" position="0 0 5" rotation="0 -90 0" visible="true" material="">
     <a-animation attribute="rotation" to="0 270 0" dur="86400" easing="linear" direction="normal" repeat="indefinite" begin="mouseenter" end="mouseleave"></a-animation>
    </a-entity>

    <a-entity id="title" position="0 1.9 5" rotation="0 180 0" scale="4 4 4" text="align:center;opacity:0.5;value:Lamborghini Aventador" visible="false">
    </a-entity>

    <a-entity position="0 0 5" id="pedestal" geometry="mergeTo:null;primitive:cylinder;height:0.1;radius:2.5;segmentsRadial:72;" material="color:#ccc;metalness:0.7;src:#pedestalTexture">
    </a-entity>

    <a-sky height="2048" radius="30" src="#skyTexture" theta-length="90" width="2048"></a-sky>
    
    <a-light type="point" intensity="2" position="1 10 -3"></a-light>

    <a-plane src="#groundTexture" rotation="-90 0 0" height="100" width="100"></a-plane>

    <a-camera position="0 0 0" rotation="0 180 0">
      <a-cursor color="#FAFAFA">
    </a-camera>

  </a-scene>

  <script>
    var car = document.querySelector('#car');
    var info = document.querySelector('#title');
    car.addEventListener('mouseenter', function() {
      info.setAttribute('visible', true);
    });
    car.addEventListener('mouseleave', function() {
      info.setAttribute('visible', false);
    });
  </script>
</body>

</html>