2016-08-09 20 views
8

Próbowałem za daleko, ale taki sam wynik, gdy animacja w ramce wyzwalana przez niestandardowe zdarzenie odtwarza animację w ten sam sposób z (x, y, z) do (x ', y' , z ') i od (x' ', y' ', z' ') do (x', y ', z') grałem z atrybutami animacji, ale nigdy nie otrzymałem rozwiązania!Animacja z ramkami A

    <html> 
       <body> 
       <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> 
       <script src="https://rawgit.com/ngokevin/aframe-layout-component/master/dist/aframe-layout-component.min.js"></script> 
       <a-scene> 
        <a-entity id="gallery" layout="type: line; margin: 1.2" position="0 0 3"> 

        <a-plane id="one" color="#CCC" look-at="[camera]"></a-plane> 
        <a-plane id="two" color="#CCC" look-at="[camera]"></a-plane> 
        <a-plane id="three" color="#CCC" look-at="[camera]"></a-plane> 
        </a-entity> 
       <!--camera & env --> 
       <a-camera position="0 0 4" id="camera"> 
        <a-entity cursor="fuse: true; maxDistance: 30; timeout: 500" 
        position="0 0 -.6" 
        scale=".01 .01 .01" 
        geometry="primitive: ring" 
        material="color: green; shader: flat"> 
       </a-entity> 
       <a-animation attribute="position" 
       begin="one" 
       to="0 0 4" 
       dur="1000" 
       fill="forwards" 
       easing="ease-in-out-cubic"></a-animation> 
       <a-animation attribute="position" 
        begin="two" 
        to="1 0 4" 
        dur="1000" 
        fill="forwards" 
        easing="ease-in-out-cubic"></a-animation> 
       <a-animation attribute="position"     begin="three"               dur="1000"               fill="forwards" 
       to="2 0 4" 
       easing="ease-in-out-cubic"></a-animation> 

       </a-camera> 

       <a-sky color="#ECECEC"></a-sky> 
       <a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light> 
       <a-light type="ambient" color="#fff"></a-light> 
       </a-scene> 
       </body> 
       </html> 

Javascript:

var one =  document.querySelector('#one'); 
    var two = document.querySelector('#two'); 
    var three = document.querySelector('#three'); 
    one.addEventListener('click', function() { 
       camera.emit('one'); 
       }); 
    two.addEventListener('click', function() { 
       camera.emit('two'); 
         }); 

    three.addEventListener('click', function() { 
       camera.emit('three'); 
       }); 

tutaj jest test w codepen: http://codepen.io/anon/pen/OXaoKg

+0

Jaki jest Twój cel? Wygląda na to, że Twój projekt działa, dostajesz animacje, gdy patrzysz na każdy obiekt. – msj121

+0

Problem polega na tym, że gdy patrzę na poprzedni obiekt, kamera przesuwa się z poprzedniego obiektu do bieżącego obiektu, a nie do rewersu (chcę, aby przesunął się z bieżącej pozycji do poprzedniej pozycji obiektu) –

+0

Kiedy patrzę na poprzedni obiekt pojawia się jako centrum ... – msj121

Odpowiedz

7

Część tutaj problemem jest to, że kliknięcia są wielokrotnie wywoływane. Możemy sterować że tak:

var at = "one"; 

one.addEventListener('click', function() { 
    if(at !== "one") { 
    at = "one"; 
    camera.emit('one'); 
    } 
}); 
two.addEventListener('click', function() { 
    if(at !== "two") { 
    at = "two"; 
    camera.emit('two'); 
    } 
}); 

three.addEventListener('click', function() { 
    if(at !== "three") { 
    at = "three"; 
    camera.emit('three'); 
    } 
}); 

http://codepen.io/akademy/pen/MjMZVJ

+1

Alternatywnie, zwiększ wartość 'fuseTimeout' na kursorze. 'cursor =" fuse: true; maxDistance: 30; timeout: 1500 "' – ngokevin