如何在A-Frame中获取动画执行完成后实体的实际位置

问题核心原因 #

你当前给#duck1实体配置的两个动画，property字段值都是rotation，仅修改实体的旋转属性，没有任何逻辑修改实体的position属性，所以实体位置本身就没有发生变化，你读取到的硬编码初始值就是实体的实际位置，属于正常现象。

代码现存问题 #

你在自定义组件的tick生命周期中绑定animationcomplete事件监听，tick每帧都会执行一次，会导致同一个监听被绑定成千上万次，出现内存泄漏和重复触发的异常，应该将监听逻辑移到init生命周期中：

AFRAME.registerComponent('eventhandling', {
  init: function () {
    const el = this.el;
    const entity = document.querySelector('#duck1');
    el.addEventListener('animationcomplete', function(){
      // 你的回调逻辑
      entity.emit('starteventforAnimation'); 
    });
  }
});

常见场景解决方案 #

如果你实际是要获取#duck1下绑定的glTF模型（子元素a-box）的实际世界坐标，父元素旋转时子元素的世界位置会随之变化，正确读取方式如下：

el.addEventListener('animationcomplete', function(){
  // 获取子a-box元素
  const boxEl = el.querySelector('a-box');
  // 读取子元素的世界坐标
  const worldPos = boxEl.object3D.getWorldPosition(new THREE.Vector3());
  console.log('子模型实际世界位置：', Object.values(worldPos));
  entity.emit('starteventforAnimation'); 
});

如果你确实需要修改#duck1实体自身的位置，修改动画的property字段为position，配置对应的from和to位置值即可，之后再读取position相关属性就能拿到变化后的值。

内容的提问来源于stack exchange，提问作者Psychonaut007