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

Question

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

这是我的代码

 <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

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

只需查看 api 即可，也许您可以将循环属性设置为 '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 重置为原始位置和旋转

Reset object3d to original position and rotation

three.js

aframe