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

我正在制作一个带有三个.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与完整的代码.

提前感谢您的答案！

解决方法

缩放多维数据集的高度是cubeHeight * cube.scale.y,屋顶是屋顶高度* roof.scale.y.

立方体的顶部中心位置(cube的高度)是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

原文地址：https://www.jb51.cc/js/153766.html