實時調整框的大小

Question

每當在輸入文本框中設置新值時，我都會嘗試調整多維數據集的大小。 到目前為止，我遇到過類似的東西，但只有在按下按鈕后它才會改變立方體。

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

只需將 onChange 添加到觸發 function 的輸入字段即可調用調整大小。

<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

將您的 html 更改為：

<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>

並更改此 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;
});

對此：

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

每當您更改輸入值時，這應該會更改矩形。 您可以在這個更新的小提琴上看到： http://jsfiddle.net/v5md7ug8/