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

Question

我正在制作一个带有three.js的项目，用户可以在其中动态更改模型的尺寸。这个问题与我发布的这个问题非常相似，但恐怕它不起作用，因为这次我正在处理平面形状的挤压。我遇到问题的代码片段如下：

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。

提前感谢您的回答！

Answer 1

缩放立方体的高度为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 示例