实时调整框的大小

Question

I am trying to resize a cube whenever a new value is set in the input text-box. So far i have come across something similar, but it changes the cube only after a button is pressed.

http://jsfiddle.net/EtSf3/3/

 document.getElementById('btn').addEventListener('click', function(e) {
        var inputs = document.getElementsByClassName('numeric-textbox');
        cube.scale.x = parseFloat(inputs[0].value) || cube.scale.x;
        cube.scale.z = parseFloat(inputs[1].value) || cube.scale.z;
        cube.scale.y = parseFloat(inputs[2].value) || cube.scale.y;
    });

Answer 1

Just have to add onChange to the input fields that triggers a function to call the resize.

<input class="numeric-textbox" type="text" value="" onChange="resCube();">

function resCube() {
    var inputs = document.getElementsByClassName('numeric-textbox');
    cube.scale.x = parseFloat(inputs[0].value) || cube.scale.x;
    cube.scale.z = parseFloat(inputs[1].value) || cube.scale.z;
    cube.scale.y = parseFloat(inputs[2].value) || cube.scale.y;
}

http://jsfiddle.net/2wxbvkd3/

Answer 2

Change your html to this:

<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<div id="container"></div>
<div class="inputRow clear" id="dimensionsNotRound" data-role="tooltip">
    <label class="grid-8">Dimensions (mm):</label>
    <br/>
    <br/>
    <div> <span>Length</span>

        <input class="numeric-textbox" id='x' type="text" value="" onkeyup="updateRect(this.id, this.value)">
        <br/>
        <br/>
    </div>
    <div> <span>Width</span>

        <input class="numeric-textbox" id='y' type="text" value="" onkeyup="updateRect(this.id, this.value)">
        <br/>
        <br/>
    </div>
    <div> <span>Height</span>

        <input class="numeric-textbox" id='z' type="text" value="" onkeyup="updateRect(this.id, this.value)">
        <br/>
        <br/>
    </div>
</div>

And change this function:

//Script for 3D Box 
document.getElementById('btn').addEventListener('click', function(e) {
    var inputs = document.getElementsByClassName('numeric-textbox');
    cube.scale.x = parseFloat(inputs[0].value) || cube.scale.x;
    cube.scale.z = parseFloat(inputs[1].value) || cube.scale.z;
    cube.scale.y = parseFloat(inputs[2].value) || cube.scale.y;
});

to this:

  const changer = {
        "x": (value) => cube.scale.x = parseFloat(value) || cube.scale.x,
      "y": (value) => cube.scale.y = parseFloat(value) || cube.scale.y,
      "z": (value) => cube.scale.z = parseFloat(value) || cube.scale.z,
    }
      
    function updateRect(axis, value){
        changer[axis](value)
    }

This should change the rectangle whenever you change the input value. You can see on this updated fiddle: http://jsfiddle.net/v5md7ug8/