Aframe: objecten animeren

Objecten animeren

Opgelet: Aframe werkt enkel online. Je moet het dus eerst uploaden om het te kunnen uittesten. 

Je kan de eigenschappen van 3D-objecten in een VR-scene animeren met het attribuut "animation".  Het animatie-attribuut verwacht een aantal parameters. In eerste instantie welke eigenschap van het object je wil animeren(bijvoorbeeld "rotation") en vervolgens de specificaties van die animatie. 

animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"

Tik hier je tekst

Parameter Waarde
 property  animation
 to  0 360 0
 loop  true
 dur  10000 (milliseconden of 10 seconden)

Een voorbeeld: 

<html>   
    <head>     
        <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>   
    </head>   
    <body>     
        <a-scene>       
            <a-assets>    
                <img id="space" src="images/melkweg.jpg">           
                <img id="wolk" src="images/wolken.jpg">       
            </a-assets>
            <a-sphere src="#wolk" radius="2.25" color="#FF0000" position="0 0 -10" 
                      animation="property: rotation; to: 0 360 0; loop: true; dur: 10000
                      </a-sphere>                    
            <a-sky src="#space"></a-sky>     
        </a-scene>   
    </body> 
</html>
Demo: https://www.leerschool.be/api/examples/vrles/006.php
Volgende pagina