【发布时间】:2018-07-11 15:36:06
【问题描述】:
在这种情况下,我有一些 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('-----------------------');
});
}
当我控制台记录 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}
所以我的最后一个问题是,我如何始终在相对于绿色中心的正确位置获得黄色位置?我目前的逻辑有什么问题?
如果有什么不清楚的地方请告诉我!所以我可以澄清一下。
【问题讨论】:
标签: javascript math three.js position