start gltf animation with function when using gltf-part component

Open
#283 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
computer-graphics, frontend

Research direction

Reproduce the provided HTML example with the gltf-part and animation-mixer components, using the linked GLTF asset and clip name Lochplatte_A_Ani. Start by checking how extracted parts handle GLTF animations and compare that with the animation-mixer entry point. Done means the Lochplatte_A entity starts the named animation when the button is clicked.

Written by the indexing model from the issue text.

Description

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

Dominant language
JavaScript
Stars
1.4k
Forks
425
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from supermedium/superframe

All issues in supermedium/superframe

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.