相对于点javascript放置对象

Question

我有一些javascript代码试图在这种情况下相对于中心点将一些对象放在彼此之上0,0事情是对象的数量，对象的大小和对象之间的间距都是可变的。

看下面这张图片解释了我最好的情况（希望如此;））：

因此，在这种情况下，中心点是绿点，网格中心位置是黄点。 Mh代表网格高度（变量） Sh代表间距高度（可变） 我试图展示黄点计算背后的逻辑。但是，当我尝试在javascript中实现它时，它适用于3行，但它在其他行数上断。

这是我到目前为止所尝试的：

var data = {
    text : ["THE NEXT","POINT","OF VIEW"],
    size : 5,
    height : 2,
    curveSegments : 12,
    line_height : 2
};

function generateTextGeometry(mesh) {

    var scaled_lineheight = map_r(data.size, 2, 75, 0.5, 20);
    var y_start =  (0 - data.text.length * data.size / 2 - data.size / 2 - (data.text.length - 1) * scaled_lineheight)/2;
    var loader = new THREE.FontLoader();

    loader.load( 'data/suisse_2.json', function ( font ) {

        for (var i = data.text.length - 1; i >= 0; i--) {
            var geometry = new THREE.TextGeometry( data.text[i], {
                font: font,
                size: data.size,
                height: data.height,
                curveSegments: data.curveSegments
            });
            geometry.center();
            mesh.children[i].geometry = geometry;
            mesh.children[i].position.y = y_start;

            console.log(mesh.children[i].position);

            if (i < data.text.length) {
                y_start += (data.size + scaled_lineheight);
            }else{
                y_start += data.size;
            }
        }
        console.log('-----------------------');
    });
}

当我在console.log中找到3行的位置就可以了：

p {x：0，y：-6.301369863013699，z：0} p {x：0，y：0，z：0} p {x：0，y：6.301369863013699，z：0}

但对于任何其他数量的行，这是错误的：

p {x：0，y：-4.4006849315068495，z：0} p {x：0，y：1.9006849315068495，z：0}

所以我最后的问题是我如何总是在相对于绿色中心的正确位置获得黄色位置？我目前的逻辑有什么问题？

如果有什么不清楚请告诉我！所以我可以澄清一下。

Answer 1

所以在阅读了我自己的问题大约20次之后。光照在我的脑袋上哈哈。

所以我在计算初始开始时犯了一个错误这里是更新的行：

var y_start =  0 - (((data.text.length - 1) * data.size) + ((data.text.length - 1) * scaled_lineheight))/ 2;