如何修改此功能，使其在相机前面堆叠拱门？

Question

我创建了一个在相机前面并排堆叠拱门的功能：

<!-- 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`
}

但正如你所看到的，他们并不完全在镜头前。如何修改setThumbsRotation来实现这个目标？

无论的拱门数量是多少：

Answer 1

我认为你不需要逐个设置旋转，我建议在实体中包装所有图像，并且只设置包装器旋转一次。

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