A-Frame-Animation

Ich habe zu weit versucht, aber das gleiche Ergebnis, wenn Animation in A-Frame durch ein benutzerdefiniertes Ereignis ausgelöst wird, spielen Sie diese Animation auf die gleiche Weise von (x, y, z) bis (x ', y' , z ') und von (x' ', y' ', z' ') bis (x', y ', z') Ich spielte mit a-animation-Attributen herum, bekam aber nie eine Lösung!A-Frame-Animation

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

hier ist der Test in codepen: http://codepen.io/anon/pen/OXaoKg

Quelle

2016-08-09 Bochkati Mohamed Amine

Was ist Ihr Ziel? Es sieht so aus, als ob Ihr Projekt zu funktionieren scheint, Sie erhalten Animationen, wenn Sie sich jedes Objekt ansehen. – msj121

Das Problem ist, wenn ich auf das vorherige Objekt schaue, bewegt sich die Kamera vom vorherigen Objekt zum aktuellen Objekt und nicht umgekehrt (ich möchte es von der aktuellen Position zur vorherigen Objektposition bewegen) –

Wenn ich mir das vorherige Objekt anschaue es springt in Sicht als das Zentrum .... – msj121

Ein Teil des Problems ist hier, dass die Klicks immer wieder ausgelöst werden. Das können wir wie folgt steuern:

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

Quelle

2016-10-31 11:08:02

Alternativ erhöhen Sie die 'fuseTimeout' auf dem Cursor. 'cursor =" fuse: true; maxDistanz: 30; Zeitüberschreitung: 1500 "' – ngokevin

Antwort

Verwandte Themen