CODEWITHSUNDEEP
javascriptreactjsaframe
beek
beek

Reputation: 3750

Aframe React dynamic string value

Just trying to get my head around using react and aframe together with the spread operator etc.

So I have an Entity using Meshline

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

I'm trying to make that path string dynamic with 2 objects i.e. something like

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',
}

But that's obviously not working because I get a

TypeError: value.split is not a function

How do I turn that object into a string of values via AFRAME/React? Or am I trying to be too clever here and should just build the string?

Upvotes: 0

Views: 88

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

Although the component should be taking object arrays as its input, it seems to always parse the path with its parse() function (64th line).

I've tried with [{x,y,z},{x,y,z}], but with no luck.

The workaround is easy though: the AFRAME.utils.coordinates.stringify function, which turns an {x,y,z} object into a "x y z" string.

So having an array of coordinate objects, you can get Your coords with one forEach:

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

and use the stringified as Your meshline path.

It's a bit late, but i've managed to get a working fiddle.

Upvotes: 1

Related Questions