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

【问题标题】：Dynamically scale object stacked over another one动态缩放堆叠在另一个对象上的对象
【发布时间】：2015-05-03 17:55:24
【问题描述】：

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

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。

提前感谢您的回答！

【问题讨论】：

这是同一主题的第三个问题，但每个问题都比前一个问题稍难一些。但都具有相同的共同点。基于该比例的比例和对象对齐问题。也许你对这个问题的思考全错了。我认为如果您的 GUI 实际操纵元素的实际尺寸，而不是它们的比例，那会更容易。如果您知道对象元素的确切尺寸，则在它们上或周围对齐其他元素会容易得多。只是一个想法。
@gaitat 我知道，但我能找到的所有例子都是操纵物体的比例，而不是它的尺寸。但是，如果你知道一些例子，请给我看看。谢谢！！
更新了 y 缩放：jsfiddle
@uhura 没问题！我只是在寻找y scale。将其发布为带有一点解释的答案，以便您获得赏金

标签： javascript three.js

【解决方案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 example

【讨论】：