如何通过three.js在A框架中控制.GLB模型动画

发布于 2025-02-04 18:55:55 字数 1175 浏览 2 评论 0原文

我正在尝试用三架A-js播放GLB动画，现在它只是一秒钟的工作，然后停止，有人可以帮我吗？这是我的代码：

<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>

原文

I'm trying to play a glb animation in A-FRAME with Three.js,
now it works just for a second and then it stop, could someone help me please?
this is my code:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一瞬间的火花 2025-02-11 18:55:55

在A框架中控制动画是使用Aframe Extra的使用预定义的动画混合组件。

<head>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/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>

您可以将所需的动画设置为剪辑属性并根据程序逻辑播放任何动画。将其用于参考。在我的代码游泳动画中，首先播放了咬合动画。

To control animation in a-frame is to use predefined animation-mixer component by aframe extra's.

<head>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/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>

where you can set the required animation to clip attribute and play any animation based on your program logic. Use this for reference if any. Here in my code swimming animation plays first and after 2 seconds bite animation plays.

回复收藏 0 原文

贩梦商人 2025-02-11 18:55:55

等到型号加载：

  this.el.addeventlistener（“型号加载”，evt =＆gt; / * supper * /）}

更新renderloop中的动画 - 在每个 tick 。您可以使用间隔或其他内容，但是Aframe已经为此目的具有内置功能：

<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>

Wait until the model is loaded with:

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

update the animation in the renderloop - on each tick. You could use an interval or something else, but aframe has already a built-in function for this purpose:

<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>

回复收藏 0 原文

~没有更多了~