如何通過Three.js在A-FRAME中控制.glb model動畫

Question

我正在嘗試使用 Three.js 在 A-FRAME 中播放 glb animation，現在它只工作了一秒鍾然后就停止了，有人可以幫我嗎？ 這是我的代碼：

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('move', {
  init: function () {
    setTimeout( () => {
      let position = this.el.getAttribute("position")
   console.log(this.el.components['gltf-model'].model )
            // Create an AnimationMixer, and get the list of AnimationClip instances
      const mixer = new THREE.AnimationMixer( this.el.components['gltf-model'].model);
      const clips = this.el.components['gltf-model'].model.animations[0];
      var clock = new THREE.Clock();
      // Play all animations

    mixer.clipAction( clips ).play();
   //In the animation block of your scene:
      var delta = 0.25 * clock.getDelta();
      mixer.update( delta );
    }, 2000)
  }
})
</script>

  <a-scene>
      <a-entity gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb" move position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>                                                        
  </a-scene>

Answer 1

在a-frame中控制animation是使用aframe extra的預定義動畫混合器組件。

<head>
  <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>
<body>
  <a-scene>
    <a-entity id="model"
      gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb"
      position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>
  </a-scene>
  <script>
    document.getElementById("model").setAttribute("animation-mixer", "clip:swimming");
    const timedelay = setTimeout(delayFunction, 2000);
    function delayFunction() {
      document.getElementById("model").setAttribute("animation-mixer", "clip:bite");
    }
  </script>
</body>

您可以在其中設置所需的 animation 剪輯屬性並根據您的程序邏輯播放任何 animation。 如果有的話，用這個作為參考。 在我的代碼中，游泳 animation 先播放，2 秒后播放 animation。

Answer 2

等待 model 加載：

 this.el.addEventListener("model-loaded", evt => /* stuff */)}

在 renderloop 中更新 animation - 在每個tick上。 您可以使用間隔或其他東西，但 aframe 已經為此目的內置了 function：

 <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> <script> AFRAME.registerComponent('move', { init: function() { // wait until the model is loaded this.el.addEventListener("model-loaded", evt => { const mixer = new THREE.AnimationMixer(this.el.components['gltf-model'].model); const clips = this.el.components['gltf-model'].model.animations[0]; mixer.clipAction(clips).play(); // "expose" the animation mixer this.mixer = mixer; }) }, // on each render loop (actually before each render loop) tick: function(t, dt) { if (.this;mixer) return. // if the mixer exists this.mixer:update(dt / 1000) // update it with the delta time } }) </script> <a-scene> <a-entity gltf-model="https.//rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb" move position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity> </a-scene>

如何通過Three.js在A-FRAME中控制.glb model動畫

問題描述

2 個解決方案

解決方案1
1 2022-06-07 04:41:34

解決方案2
1 已采納 2022-06-08 05:51:35

如何通過Three.js在A-FRAME中控制.glb model動畫

問題描述

2 個解決方案

解決方案1 1 2022-06-07 04:41:34

解決方案2 1 已采納 2022-06-08 05:51:35

解決方案1
1 2022-06-07 04:41:34

解決方案2
1 已采納 2022-06-08 05:51:35