Dynamic height of cube with fixed floor

Question

I am creating a dynamic cube that can be dynamically changed by scaling its mesh. The issue is, I would like to keep it fixed to the floor when modifying its height. This is a snippet of my code:

function init() {

// Floor position
floor = new THREE.Mesh( shadowGeo, shadowMaterial );
floor.position.y = 0;
floor.rotation.x = - Math.PI / 2;
scene.add( floor );

// Defines the cube and its original position
var BoxGeometry = new THREE.BoxGeometry(50, 50, 50);
var boxMaterial = new THREE.MeshLambertMaterial({color: 0x000088});
cube = new THREE.Mesh(BoxGeometry, boxMaterial);
cube.position.set(0,30,0);
scene.add(cube);

// GUI PANEL INTERACTION
// Now the GUI panel for the interaction is defined
gui = new dat.GUI();

parameters = {
        height: 1,
        reset: function() {resetCube()}     
    }

// Define the second folder which takes care of the scaling of the cube
var folder1 = gui.addFolder("Dimensions");
var cubeHeight = folder2.add(parameters, "height").min(0).max(200).step(1);
folder1.open();

// Function taking care of the cube changes
cubeHeight.onChange(function(value){cube.scale.y = value;});

gui.open();
}

// Update cube characteristics
function updateCube() {
    cube.scale.y = parameters.y;
}

// Reset cube settings
function resetCube() {
    parameters.height = 1;
    updateCube();
}

// Rest of the code

I have searched around and I saw this similar topic, but still it does not properly explain how to modify dimensions when the object with a reference floor. Do you know how can I solve this issue?

So it should be located inside `cubeHeight.onChange()` and should be something like `{cube.scale.y = (cube.scale.y - value) / 2}`? I tried it, but it is not working — d_z90, Apr 24 '15 at 11:40

score 1 · Accepted Answer · answered Apr 25 '15 at 19:47

Changed your .onChange() function to have the cube stay on the ground:

    // Function taking care of the cube changes
    cubeHeightScale.onChange(
        function(value)
        {
            cube.scale.y = value;
            cube.position.y = (cubeHeight * value) / 2;
        } );

Here is a fiddle to check the changes live: http://jsfiddle.net/Lsjh965o/

three.js r71

Dynamic height of cube with fixed floor

1 Answers1