实时调整框的大小

Question

每当在输入文本框中设置新值时，我都会尝试调整多维数据集的大小。到目前为止，我遇到过类似的事情，但只有在按下按钮后它才会改变立方体。

 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 添加到输入字段即可触发调用调整大小的函数。

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

并更改此函数：

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

这应该会在您更改输入值时更改矩形。你可以在这个更新的 fiddle 上看到：http://jsfiddle.net/v5md7ug8/

实时调整框的大小

Resizing box in real time

javascript

three.js