A-frame animasyonu

Çok fazla denedim ama aynı sonucu, özel bir etkinlik tarafından tetiklenen bir karedeki animasyonda (x, y, z) - (x ', y') , z ') ve (x' ', y' ', z' ')' den (x ', y', z ') ' a-animasyon özniteliklerinde oynadım ama hiçbir zaman bir çözüm buldum!A-frame animasyonu

    <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: Burada

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'); 
       });

codepen içinde testtir: Burada sorunun http://codepen.io/anon/pen/OXaoKg

kaynak

2016-08-09 Bochkati Mohamed Amine

hedefiniz nedir? Projenizin işe yaradığı görülüyor, her nesneye baktığınızda animasyon alıyorsunuz. – msj121

Sorun, önceki nesneye baktığımda, kameranın önceki nesneden geçerli nesneye değil, tersine hareket etmesine (geçerli konumdan önceki nesne konumuna geçmesini istiyorum) –

Önceki nesle baktığımda merkez olarak görünüme kavuşuyor .... – msj121

Parça tıklama defalarca tetiklenir olmasıdır. Bu şekilde kontrol altında tutarsınız:

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

kaynak

2016-10-31 11:08:02

Alternatif olarak, imlecin üzerindeki 'fuseTimeout 'değerini artırın. imleç = "sigorta: true; maxDistance: 30; zaman aşımı: 1500" – ngokevin

A-frame animasyonu

cevap

İlgili konular