Question

我有一个gltf模型，该模型具有一个动画，我可以通过单击播放按钮让用户启动/停止。虽然我可以在用户按下“停止”时停止播放动画，但无法将模型重置为其原始位置和旋转。

这是我的代码

 <a-entity gltf-model="#character" texture-map="map: map" position="0 0 -7"></a-entity>

这是组件纹理贴图中代码的一部分，试图将模型重置回其原始位置0、0 -7

  play.addEventListener("click", (e)=> {
    if (play.innerHTML === "Stop"){
      play.innerHTML = "Play";
      this.el.pause();
      this.el.removeAttribute("animation-mixer");  
      let position = new THREE.Vector3(0, 0, -7);
      this.el.object3D.position.copy(position); 
      this.el.object3D.matrixWorldNeedsUpdate = true;
      this.el.object3D.updateMatrixWorld(); */
      this.el.object3D.lookAt(-3, 0, 0);
    }
    else{
      play.innerHTML="Stop";
      this.el.setAttribute("animation-mixer", "clip", "catwalk");
      this.el.play();                  
    }
})

当我执行此代码并单击“停止”按钮时，动画将停止，但模型的位置和旋转不会重置。有人可以帮我解决这个问题吗？

Answer 1

您正在使用animation-mixer组件控制动画。 https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders

只需查看api，也许您可以将loop属性设置为“ once”，并将时间刻度设置为一些较大的负数，例如-100。从理论上讲，这将使动画非常快地向后播放，然后在完成时停止播放。我从来没有尝试过，所以不知道它是否会起作用，但似乎可以。或者，如果您非常勇敢，则可以下载动画混合器的源代码，并尝试创建自己的属性或方法，以将动画帧设置为初始时间，或者设置任何您喜欢的帧。

 play.addEventListener("click", (e)=> {
    if (play.innerHTML === "Stop"){
      play.innerHTML = "Play";
      this.el.setAttribute('animation-mixer',"clip: catwalk; loop: once; duration: .1");
    }
    else{
      play.innerHTML="Stop";
      this.el.removeAttribute("animation-mixer");  
      this.el.setAttribute("animation-mixer", "clip: catwalk; loop: repeat; duration: 15");
    }
  })

将object3d重置为原始位置和旋转

1 个答案: