index.html

<html>
<head>
    <title>A-Frame 3D Model Animations in the Runtime</title>
    <script src='https://aframe.io/releases/1.3.0/aframe.min.js'></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script></head>
    <link rel="stylesheet" href="css/style.css">
<body>
    <!-- Animation Controls -->
    <div id="animationControls">
        <button class="buttonC" onclick="idle()">Idle</button>
        <button class="buttonC" onclick="look()">Look</button>
        <button class="buttonC" onclick="sad()">Sad</button>
        <button class="buttonC" onclick="pushUpAndJump()">Push Up with Jump</button>
        <button class="buttonC" onclick="twist()">Twist</button>
        <button class="buttonC" onclick="kick()">Kick</button>
    </div>
    <!-- A-Frame Scene -->
    <a-scene>
        <a-entity id="model" animation-mixer position="0 0 -3"></a-entity>
        <a-plane position='0 0 -4' rotation='-90 0 0' width='4' height='4' color='#7BC8A4'></a-plane>
        <a-sky color='#ECECEC'></a-sky>
    </a-scene>
    <script src="js/main.js"></script>
</body>

</html>