start gltf animation with function when using gltf-part component

Question

start gltf animation with function when using gltf-part component

MathisPr opened this issue 4 years ago · 0 comments

Hi there!

One question: is it possible to use animations stored in the gltf, when you extract parts from a GLTF model into their own A-Frame entities?

in my case the animations are stored in the gltf, but effects only the parts that i want to extract (made in Blender)
Clipname: Lochplatte_A_Ani

i want to start the animation with a button

so far, my code does not work

<html>
<!-- Source: https://ar-js-org.github.io/AR.js-Docs/  Marker Based Example 24.10.2020-->

  <!-- A-Frame Script 1.0.4 -->
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <!-- https://github.com/n5ro/aframe-extras -->
  <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
  <!-- https://github.com/supermedium/superframe/tree/master/components/gltf-part -->
  <script src="https://unpkg.com/aframe-gltf-part-component/dist/aframe-gltf-part-component.min.js"></script>
  <!-- Script for event-set -->
  <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
  
  
  <script>
    window.onload = function () {
    
      let gltfobj_LA = document.getElementById("Lochplatte_A_entity");
      
      //Animation_deckel
      document
        .querySelector(".animation-L_A-button")
        .addEventListener("click", f_animation_L_A)
        
        function f_animation_L_A() {        

          gltfobj_LA.setAttribute('animation-mixer', {clip: "Lochplatte_A_Ani", timeScale: 1, loop: "once", clampWhenFinished: true}); 
          
        };

  </script>
  
  <style>
    .buttons {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 5em;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }

    .animation-LochplatteA-button {

    }
   
  </style>

  <head>
      <title>AR A-Frame+ARJS Kapselfüllgraet.gltf Animated</title>
  </head>

  <body style="margin : 0px; overflow: hidden;">

    <a-assets>
      <a-asset-item
          id="Kapselfuellgeraet_gltf"
          src="https://raw.githubusercontent.com/MathisPr/ARProject/main/assets/Kapselfuellgeraet.gltf"
      ></a-asset-item>
  </a-assets>

  <div class="buttons">
    <button class="animation-L_A-button">Lochplatte A</button>
  </div>


    <a-scene embedded arjs>
      <!-- Marker -->
      <a-marker preset="hiro">

        <a-entity 
          gltf-part="src: #Kapselfuellgeraet_gltf; part: Gestell" 
          position="0 0 0" 
          scale="10 10 10"
        >
        </a-entity>
        
        <a-entity 
          id="Lochplatte_A_entity"
          gltf-part="src: #Kapselfuellgeraet_gltf; part: Lochplatte_A" 
          position="0 0 0" 
          scale="10 10 10"
        >
        </a-entity>       
        
      </a-marker>
      
      <!-- Camera -->
      <a-entity camera></a-entity>
    </a-scene>

  </body>
</html>

The Project in Glitch: https://glitch.com/edit/#!/arjs-projects?path=Test_Buttons_manipulate_GLTF.html%3A98%3A0