In my JavaScript code, I am trying to position objects above each other relative to a center point at coordinates 0,0. The number of objects, their sizes, and the spacing between them are all variable.
This image illustrates my situation best (hopefully ;)): https://i.sstatic.net/IAkw5.png
Here, the green dot represents the center point and the yellow dots represent the mesh center positions.
The Mh indicates Mesh Height (variable)
The Sh indicates Spacing height (variable)
I have attempted to explain the calculation logic for the yellow dots. However, when I try to implement this in JavaScript, it works for 3 lines but breaks with different line amounts.
This is what I have tried so far:
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('-----------------------');
});
}
When I log the positions for 3 lines, they appear correct:
p {x: 0, y: -6.301369863013699, z: 0}
p {x: 0, y: 0, z: 0}
p {x: 0, y: 6.301369863013699, z: 0}
But for any other number of lines, the positions are incorrect:
p {x: 0, y: -4.4006849315068495, z: 0}
p {x: 0, y: 1.9006849315068495, z: 0}
My ultimate question is how can I consistently get the yellow positions right relative to the green center? What logic flaw exists in my current approach?
If anything is unclear, please ask for clarification!