Aframe动画组件已禁用round仍报错，位置动画异常求助

I ran into exactly this issue when upgrading from A-Frame 0.5 to 0.8.2 with the v4.2.0 animation component, and the root cause is a key change in how the animation component handles position values.

The Problem #

In older A-Frame versions, you could pass raw Three.js Vector3 instances directly to the from/to animation properties. But the v4.x animation component expects serializable coordinate formats (arrays or space-separated strings) instead of Vector3 objects. When it tries to process the Vector3 directly, it can't access the x property properly during internal steps like rounding, hence the TypeError you're seeing.

The Solution #

Convert your Vector3 values into arrays (or strings) of raw x/y/z numbers before passing them to the animation config:

const positionAnimation = {
  property: 'position',
  // Convert Vector3 to an array of numeric coordinates
  from: [this._threeElement.position.x, this._threeElement.position.y, this._threeElement.position.z],
  to: reversed 
    ? [this._initialPosition.x, this._initialPosition.y, this._initialPosition.z]
    : [this._targetPosition.x, this._targetPosition.y, this._targetPosition.z],
  dur: 2000,
  round: false,
  easing: 'easeInOutCubic',
  startEvents: ['---non-existent-event---'] // Keep auto-play disabled
};
this.el.setAttribute('animation__position', positionAnimation);

If you prefer string formatting, this works too:

from: `${this._threeElement.position.x} ${this._threeElement.position.y} ${this._threeElement.position.z}`

Why Cloning Vector3 Didn't Help #

Using AFRAME.utils.clone just creates another Vector3 instance—this doesn't fix the issue because the animation component still can't process the Vector3 object directly. You need to extract the raw numeric values into a format the component is designed to handle.

This adjustment should resolve the TypeError while preserving your original animation logic.

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