新手 A-frame：a-box 元素以 x 轴为中心

Question

我是第一次尝试 a-frame，只是想将许多不同大小的 a-box 元素添加到场景中，所有元素都沿 x 轴定位并向上延伸 - 就像建筑物上的例如街道。如果高度不同 - 如下面 4 个盒子的第一本书，盒子从左到右正确分布，但垂直高度的中点以 x 轴为中心，一半高度在轴上方，一半在轴下方.我希望每个盒子的高度从 y=0 开始，并在正 y 方向向上延伸到它的高度。

下面的第二块4个盒子，都是一样高的，和预期的一样....它们沿着x轴从左到右分布，从y=0向上延伸到y=身高。

完整代码如下。帮助表示赞赏.....我想这很简单...

'''

<a-sky color="#222"></a-sky>
<a-box color="orange" depth="0.1" height="1" width="1"  position="-6 0 -10"></a-box>
<a-box color="orange" depth="0.1" height="2" width="1"  position="-4 0 -10"></a-box>
<a-box color="orange" depth="0.1" height="3" width="1"  position="-2 0 -10"></a-box>
<a-box color="orange" depth="0.1" height="7" width="1"  position="0 0 -10"></a-box>


<a-box color="green" depth="0.1" height="4" width="1"  position="2 0 -10"></a-box>
<a-box color="green" depth="0.1" height="4" width="1"  position="4 0 -10"></a-box>
<a-box color="green" depth="0.1" height="4" width="1"  position="6 0 -10"></a-box>
<a-box color="green" depth="0.1" height="4" width="1"  position="8 0 -10"></a-box>

'''

Answer 1

根据文档，position 属性采用 x,y,z 坐标。其中 y 轴是垂直轴。所以你需要改变y轴值。您也可以按 alt + ctrl + i 打开 aframe 自己的检查工具，您可以在其中玩定位。

另外看看这个glitch code。

来自评论中的讨论。

您只需要根据第一个对象的高度更改位置即可。当您将位置设置为 0 0 0 时，该对象的中心位于 0 0 0，因此如果您的对象的高度为 5，则您的位置需要为 0 2.5 0。

<head>
  <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>

<body>
  <a-scene>
    <a-box color="red" depth="1" height="1" width="1" position="0 0 -5"></a-box>
    <a-box color="green" depth="1" height="2" width="1" position="0 3 -5"></a-box>
    <a-box color="blue" depth="1" height="3" width="1" position="0 7 -5"></a-box>
    <a-box color="yellow" depth="1" height="4" width="1" position="0 12 -5"></a-box>
    <a-sky color="#222"></a-sky>
  </a-scene>
</body>

新手 A-frame：a-box 元素以 x 轴为中心

Newbie A-frame : a-box elements are centred on the x-axis

d3.js

aframe