Revise your html with the following:
<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>
Replace the existing function with this:
//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;
});
with the following:
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 modification will update the rectangle whenever the input value is changed.
You can view the updated fiddle at: http://jsfiddle.net/v5md7ug8/