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

【问题标题】：Reset object3d to original position and rotation将object3d重置为原始位置和旋转
【发布时间】：2019-10-07 13:59:21
【问题描述】：

我有一个 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();                  
    }
})

当我执行此代码并点击停止按钮时，动画停止但模型的位置和旋转不会被重置。谁能帮我解决这个问题？

【问题讨论】：

我想了解this.el.pause() 的作用。 this.el 是什么对象？也许动画关键帧移动了对象，暂停它不足以重置它。您可能需要完全删除动画。
this.el 指的是组件（纹理贴图）附加到的实体。我实际上是在 this.el.pause() 之后删除动画。 this.el.pause() 用于停止动态行为。我后来实际上从代码中删除了 this.el.pause() ，它没有任何效果。

标签： three.js aframe

【解决方案1】：

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

仅查看 api，也许您可以将循环属性设置为“一次”，并将时间刻度设置为一些较大的负数，例如 -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");
    }
  })

【讨论】：

你会使用setAttribute('animation-mixer','loop','once')来设置属性
多么棒的解决方案。有效。我已将新代码添加到您的答案中。非常感谢