如何为A-Frame动画to属性绑定变量？点击地面触发移动动画失效

问题场景 #

代码逻辑目标是实现点击地面后，让模型平滑动画移动到点击位置。现有基础代码如下：

// 获取模型元素
const model = document.getElementById('model') 
// 获取可交互地面元素
const ground = document.getElementById('ground')
// 绑定地面点击事件
ground.addEventListener('click', (event) => {
  console.log('clicked ground')
  // 获取点击位置的三维坐标（Three.js Vector3对象）
  const touchPoint = event.detail.intersection.point
  console.log(touchPoint)
  console.log(touchPoint.x)
  console.log(touchPoint.y)
  console.log(touchPoint.z)
})

实际运行时，无法把获取到的touchPoint正确赋值给动画的to属性实现平滑移动。

已尝试的方案及效果 #

• 完全无效的方案：
  • 字符串内直接写变量名，未做插值替换：model.setAttribute('animation', 'property: position; to: touchPoint')
  • 字符串内拼接对象属性，未做插值替换：model.setAttribute('animation', 'property: position; to: touchPoint.x touchPoint.y touchPoint.z ')
  • 模板字符串直接插入整个Vector3对象：model.setAttribute('animation', property: position; to: ${touchPoint})
  • 引号格式错误的写法：model.setAttribute('animation', 'property: position; to: ${touchPoint}')
• 效果不符合需求的方案：
  • 硬编码固定坐标：model.setAttribute('animation', 'property: position; to: -4 -4 2')，可正常触发动画，但无法适配动态点击位置
  • 直接设置position属性：model.setAttribute('position', touchPoint)，可立即跳转到目标位置，但没有平滑动画过渡效果

问题根因与正确写法 #

A-Frame 动画组件的to属性要求接收空格分隔的纯数字坐标字符串（格式为x y z），两类常见错误会导致赋值失效：

1. 把变量名直接写在普通字符串内，框架不会解析字符串中嵌入的JS变量引用，会直接把字符串内容当成字面值处理
2. 直接插入整个Vector3对象，对象转成字符串后会带有Vector3(x, y, z)的括号、函数名等文本，不符合动画组件要求的格式

正确实现方式是单独取出三个坐标的数值，拼成符合格式要求的坐标串再传入：

ground.addEventListener('click', (event) => {
  const touchPoint = event.detail.intersection.point
  // 拼接符合格式的目标坐标串
  const targetPosition = `${touchPoint.x} ${touchPoint.y} ${touchPoint.z}`
  // 赋值给动画组件，可自定义动画时长、缓动效果
  model.setAttribute('animation', `
    property: position; 
    to: ${targetPosition}; 
    dur: 1000; 
    easing: easeInOutQuad
  `)
})

注意：如果出现动画移动位置和实际点击位置偏移的问题，是因为event.detail.intersection.point返回的是世界坐标，而模型的position属性默认是相对于父节点的本地坐标，需要先把世界坐标转换为模型所在节点的本地坐标，再传入动画的to属性。

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