I devised a method that arranges arches in front of a camera, side by side:
<!-- 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`
}
https://i.sstatic.net/0sboV.png
Unfortunately, they are slightly misaligned with the camera. How can we adjust the setThumbsRotation to fix this?
https://i.sstatic.net/xNNOe.png
And no matter how many arches there are: