如何在A-Frame中获取实体的真实空间位置？

问题核心原因 #

你出现该现象不是A-Frame 1.2.0的BUG，核心有两个问题：

1. 你声明的所有动画修改的都是rotation（旋转）属性，全程没有修改过position（位置）属性，所以无论用什么方法读取position，返回的都必然是初始的硬编码值。
2. 你把animationcomplete事件监听写在了tick生命周期函数里，tick是每帧执行一次的回调，会导致同一个监听函数被绑定成千上万次，后续会出现控制台重复打印、页面性能下降的问题，事件监听应该放在组件的init生命周期中执行。

验证方法 #

如果你要测试属性读取功能是否正常，可以把动画的修改属性换成position测试，示例修改如下：

<a-entity 
  animation__test="property: position; from: 2 0 -7; to: 5 2 -7; easing:linear; dur:4000; startEvents: mouseenter"
>
</a-entity>

动画结束后读取position属性，就能获取到更新后的值，和旧版本逻辑一致。

补充说明 #

• 你代码里打印el.object3D.animations是错误调用，该属性存储的是Three.js的动画剪辑列表，和实体的位置、旋转值无关，要获取object3D的自身位置应该调用el.object3D.position
• 如果需要读取实体的旋转值，调用逻辑和读取位置一致：el.getAttribute('rotation')可以拿到A-Frame层面的旋转值，el.object3D.rotation、el.object3D.getWorldQuaternion()可以拿到Three.js层面的自身/世界旋转值

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