如何修改此功能，使其将拱门堆叠在镜头前？

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

如何修改此功能，使其将拱门堆叠在镜头前？

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

javascript

vue.js

aframe