I am making a project with three.js
where the user can dynamically change the dimensions of the model. The question is very similar to this one that I posted, but I am afraid it is not working since this time I am working with an extrusion of a planar shape. The snippet of the code where I am having problems is the following:
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;
});
As you can observe, when I change roof.scale.y
, also the object is moving but it should stay fixed to the upper part of the cube.
Do you know what am I doing wrong? This is a jsfiddle with the complete code.
Thanks in advance for your answers!
Scaled cube's height is cubeHeight * cube.scale.y
and roof's is roofHeight * roof.scale.y
.
Top center position of the cube (cube's height) is cube.position.y + cubeHeight/2 * cube.scale.y
or just cubeHeight * cube.scale.y
Roof's geometric center is not coordinate system center so it's position is cube's height minus half roof's height
cube.position.y + cubeHeight/2 * cube.scale.y - roofHeight/2 * roof.scale.y
Jsfiddle example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With