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;
    });

这里是小提琴：http://jsfiddle.net/z1yd342b/

three.js r71

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

1 个答案: