Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/docker/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 动态地将一个立方体堆叠在另一个立方体上_Javascript_Three.js - Fatal编程技术网

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

Javascript 动态地将一个立方体堆叠在另一个立方体上,javascript,three.js,Javascript,Three.js,我正在three.js中进行一个项目,用户可以在其中动态更改对象的维度。对象是两个尺寸不同的框,其中一个框应始终位于另一个框的顶部。 例如,如果立方体的高度为10,烟囱.position.y应为10。我尝试了不同的可能性,但不起作用 以下是我的代码片段: var cubeHeight = 0.1; var boxGeometry = new THREE.BoxGeometry(0.1, cubeHeight, 0.1); var boxMaterial = new THREE.MeshLambe

我正在
three.js
中进行一个项目,用户可以在其中动态更改对象的维度。对象是两个尺寸不同的框,其中一个框应始终位于另一个框的顶部。 例如,如果
立方体的高度为10,
烟囱.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;});
你知道如何解决这个问题吗?提前感谢您的回答

这里有一个解决方案:

    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;
    });
这里是小提琴:

3.js r71