动态缩放堆叠在另一个上的对象

时间:2015-04-28 09:34:50

标签: javascript three.js

我正在制作一个three.js的项目,用户可以动态更改模型的尺寸。这个问题与我发布的this one非常相似,但是我担心它不起作用,因为这次我正在使用平面形状的挤压。我遇到问题的代码片段如下:

cubeY.onChange(function(value){
     cube.scale.y = value;
     cube.position.y = (cubeHeight * value) / 2;
     roof.position.y = (roofHeight * roof.scale.y) / 2 + cube.position.y * 2 - roofHeight;});;
roofY.onChange(function(value){
    roof.scale.y = value;
    roof.position.y = ((roofHeight * value) + cube.position.y * 2) - value * roofHeight;
});

正如您所观察到的,当我更改roof.scale.y时,对象也在移动,但它应该固定在多维数据集的上半部分。 你知道我做错了什么吗?这是一个带有完整代码的jsfiddle

提前感谢您的回答!

1 个答案:

答案 0 :(得分:4)

缩放立方体的高度为cubeHeight * cube.scale.y,屋顶为roofHeight * roof.scale.y

立方体的顶部中心位置(立方体的高度)为cube.position.y + cubeHeight/2 * cube.scale.y或仅cubeHeight * cube.scale.y

屋顶的几何中心不是坐标系中心,所以它的位置是立方体的高度减去半屋顶的高度

cube.position.y  + cubeHeight/2 * cube.scale.y  - roofHeight/2 * roof.scale.y

Jsfiddle example