How to modify this function so it stacks the arches right in front of the camera?

Question

I created a function that stacks arches side by side in front of a camera:

<!-- HTML -->

<a-curvedimage
  v-for="(value, index) in model"
  :theta-length="42"
  :rotation="setThumbsRotation(value, index)">
</a-curvedimage>
<a-camera
  ref="camera"
  rotation="0 -90 0">
</a-camera>

// JS

// value is not being used and index goes like 0, 1, 2, etc.
setThumbsRotation (value, index) {
  const thumbLength = 42
  const rotationY = 189 - thumbLength * 21 + index * thumbLength
  return `0 ${rotationY} 0`
}

But as you can see, they're not exactly in front of the camera. How to modify setThumbsRotation to achieve this?

And regardless of the number of arches:

Answer 1

I think you don't need set rotation one by one, I recommend wrap all images in an entity, and only set the wrapper rotation once.

//theta is sum of all images theta-length setThumbsRotation (theta) { const rotationY = 180 - (theta / 2) return `0 ${rotationY} 0` }