I'm trying out a-frame for the first time and simply want to add a number of different sized a-box elements into a scene, all positioned along the x-axis and extending upwards - like buildings on a street for example. If the heights are different - as in the first books of 4 boxes below, the boxes are correctly distributed left to right but vertically the midpoint of their height is centred on the x-axis with half the height going above and half going below the axis. I want each box to start its height from y=0 an extend upwards in the positive y direction to its height.
In the second block of 4 boxes below, they are all the same height and appear as expected.... they are distributed from left to right along the x-axis and extend upwards from y=0 to y=height.
The full code is below. Help appreciated..... I guess its something simple...
'''
<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>
'''
From the documents the position attribute take x,y,z co-ordinates. Where y axis is vertical axis. so you need to change the y axis value. Also you can press alt + ctrl + i to open aframe's own inspect tool where you can play around positioning.
Additionally have look at this glitch code.
From the discussion in comments.
You just need to make changes in the position as per the height of first object. When you set position to 0 0 0 the center of that object is placed at 0 0 0, so if your object has height of 5, then your position needs to be 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>