Currently, I am developing a project using three.js, where users have the ability to dynamically adjust the dimensions of objects within the scene. Specifically, there are two boxes with varying sizes and one box that must always remain positioned on top of the other.
The challenge arises when trying to ensure that if the height of the cube changes, the chimney.position.y should also update accordingly. Despite attempting multiple approaches, I have not been successful in achieving this functionality.
Below is a snippet of the code I am working with:
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);
// GUI panel for user interaction
gui = new dat.GUI();
parameters = {
length: 1, height: 1, width: 1,
tall: 1
}
// Folder for defining house dimensions (in cm)
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 to handle cube transformations
// Adjustments made to keep the structure stable
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;});
If you have any insights or solutions to resolve this issue, your input would be greatly appreciated! Thank you in advance for your assistance!