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

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。

提前感谢您的回答！

- d_z90

---

这是同一主题的第三个问题，但每个问题都比上一个更难一点。但是所有问题都有相同的共同点。基于比例尺和对象对齐的问题。也许你对这个问题的思考方式是错误的。我认为，如果你的GUI实际上操作元素的实际尺寸而不是它们的比例尺，那么这将更容易。如果你知道你的对象元素的确切尺寸，就可以更轻松地将其他元素对齐在它们上面或周围。只是一个想法。 - gaitat

@gaitat 我知道，但我能找到的所有示例都是操纵对象的比例，而不是其尺寸。但如果您知道一些示例，请向我展示。谢谢！ - d_z90

更新了 y 轴缩放：jsfiddle - uhura

@uhura 没问题！我只是在寻找“y轴刻度”。请将其作为答案发布，并附上一些解释，以便您可以获得赏金。 - d_z90

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 example

- uhura