Aframe React 动态字符串值答案

【问题标题】：Aframe React dynamic string valueAframe React 动态字符串值
【发布时间】：2018-02-05 22:37:43
【问题描述】：

只是想通过使用 react 和 aframe 以及扩展运算符等来解决我的问题。

所以我有一个使用Meshline的实体

<Entity meshline="lineWidth: 20; path: -2 -1 0, 0 -2 0, 2 -1; color: #E20049" />

我正在尝试使用 2 个对象使路径字符串动态化，例如

buttonConfig.position = {
    x:config.position.x-3,
    y:config.position.y+3,
    z:config.position.z,
}

lineX = {
    lineWidth : 20,
    path: {...config.position,...buttonConfig.position},
    color: '#ffffff',
}

但这显然行不通，因为我得到了一个

TypeError: value.split 不是函数

如何通过 AFRAME/React 将该对象转换为一串值？还是我在这里太聪明了，应该只构建字符串？

【问题讨论】：

标签： javascript reactjs aframe

【解决方案1】：

虽然组件应该将对象数组作为其输入，但它似乎总是使用其parse() 函数（第 64 行）解析路径。

我尝试过 [{x,y,z},{x,y,z}]，但没有成功。

解决方法很简单：AFRAME.utils.coordinates.stringify 函数，它将 {x,y,z} 对象转换为“x y z”字符串。

因此，拥有一组坐标对象，您可以使用一个 forEach 获取您的坐标：

array.forEach((el, index)=>{
  stringified += AFRAME.utils.coordinates.stringify(el)
  if(index != array.length - 1) {
     stringified +=","
  }
}

并使用stringified 作为您的网格线路径。

有点晚了，但我设法得到了一个工作fiddle。

【讨论】：