javascript - 动态地将一个立方体堆叠在另一个立方体上

Question

我正在 Three.js 中开发一个项目，用户可以在其中动态更改其中对象的尺寸。这些对象是两个尺寸不同的盒子，其中一个盒子应始终位于另一个盒子的顶部。例如，如果cube的高度是10，chimney.position.y应该是10。我尝试了不同的可能性，但它不起作用。

这是我的代码片段:

var cubeHeight = 0.1;
var boxGeometry = new THREE.BoxGeometry(0.1, cubeHeight, 0.1);
var boxMaterial = new THREE.MeshLambertMaterial({color: 0x000088});
cube = new THREE.Mesh(boxGeometry, boxMaterial);
cube.position.set(0, cubeHeight/2, 0);
scene.add(cube);

var chimneyGeometry = new THREE.BoxGeometry(5, 0.1, 5);
var chimneyMaterial = new THREE.MeshLambertMaterial({color: 0x000088});  
chimney = new THREE.Mesh(chimneyGeometry, chimneyMaterial);
chimney.position.set(0,cubeHeight,-12.5);
scene.add(chimney);

// Now the GUI panel for the interaction is defined
gui = new dat.GUI();
parameters = { 
    length: 1, height: 1, width: 1,
    tall: 1 
}

// Define the second folder which takes care of the scaling of the cube
var folder1 = gui.addFolder("House dimensions (cm)");
var cubeX = folder1.add(parameters,"length").min(1).max(2000).step(1).listen();
var cubeY = folder1.add(parameters, "height").min(1).max(2000).step(1).listen();
var cubeZ = folder1.add(parameters, "width").min(1).max(2000).step(1).listen();
var chimneyHeight = folder1.add(parameters, "tall").min(1).max(700).step(1).listen(); 
folder1.open();

 // Function taking care of the cube changes
 // cubeY has a different value to keep the solid fixed to the floor
 cubeX.onChange(function(value){cube.scale.x = value; roof.scale.x = value;});
 cubeY.onChange(function(value){cube.scale.y = value; cube.position.y = (cubeHeight * value) / 2;});
 cubeZ.onChange(function(value){cube.scale.z = value;});
 chimneyHeight.onChange(function(value){chimney.scale.y = value; chimney.position.y = ((cubeHeight * value) / 2) + cubeY;});

您知道如何解决这个问题吗？预先感谢您的回答!

Answer 1

这是一种解决方案:

    cubeY.onChange(function(value){
        cube.scale.y = value;
        cube.position.y = (cubeHeight * value) / 2;
        chimney.position.y = (chimneyHeight * chimney.scale.y) / 2 + cube.position.y * 2
    });

    chimneyY.onChange(function(value){
        chimney.scale.y = value;
        chimney.position.y = (chimneyHeight * value) / 2 + cube.position.y * 2;
    });

这里是 fiddle :http://jsfiddle.net/z1yd342b/

三.js r71