Question

我试图将数据从html格式传递到表示boxGeometry的x，y和z维度的三个参数。我手动设置参数值时工作正常，但是当参数由表单中输入的值设置时不能正常工作。

HTML

    <form>
        <input type="text" name="valueX" id="valueX">
        ValueX<br>
        <input type="text" name="valueY" id="valueY">
        ValueY<br>
        <input type="text" name="valueZ" id="valueZ">
        ValueZ<br>
    </form>
    <button onclick="render()">Render that box!</button>

JS

var geometry = newTHREE.BoxGeometry(parseInt(document.getElementById('valueX').value) ,parseInt(document.getElementById('valueY').value) ,parseInt(document.getElementById('valueZ').value));

var material = new THREE.MeshLambertMaterial({color:0x00ff20});

var cube = new THREE.Mesh(geometry,material);

scene.add(cube);

function render (){
 cube.rotation.x += 1;
 cube.rotation.y += 1;
 renderer.render(scene,camera);
}

Answer 1

<button onclick="go()">Render that box!</button>


function go() {

    var geometry = new THREE.BoxGeometry( parseInt(document.getElementById('valueX').value), parseInt(document.getElementById('valueY').value), parseInt(document.getElementById('valueZ').value) );

    var material = new THREE.MeshLambertMaterial( { color:0x00ff20 } );

    var cube = new THREE.Mesh( geometry, material );

    scene.add( cube );

    render();

}

three.js r.75

Answer 2

您将永久设置几何体，使其具有加载时的输入值，即ValueX，ValueY和ValueZ。每次单击按钮进行渲染时，您都需要设置这些属性。

function render() {
    var geometry = newTHREE.BoxGeometry(
            parseInt(document.getElementById('valueX').value),
            parseInt(document.getElementById('valueY').value),
            parseInt(document.getElementById('valueZ').value)
    );

    // Assuming that you wish to add a new cube each time render is called...
    var material = new THREE.MeshLambertMaterial({color:0x00ff20});
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.rotation.x += 1;
    cube.rotation.y += 1;

    renderer.render(scene, camera);
}

三个JS boxGeometry，渲染警告：渲染计数或primcount为0

2 个答案: