javascript - 使用 Jquery 或 Javascript 为 Three.js 中的 CylinderGeometry 设置新尺寸

Question

我正在尝试更改从 Three.js 示例创建的圆柱体在运行时的尺寸。我正在尝试的代码不起作用:

这是我的代码: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 (pixels):</label>
    <br/>
    <br/>
    <div> <span>Length</span>

        <input class="numeric-textbox" id="inp-cylLength" type="text">
        <br/>
        <br/>
    </div>
    <div> <span>Diameter</span>

        <input class="numeric-textbox" id="inp-cylDiameter" type="text" >
        <br/>
        <br/>
    </div>
    <input type="button" value="Click me to change the Dimensions" onclick="updateObject();" />

JS

function updateObject() {
        var diameter = parseInt(document.getElementById('inp-cylDiameter').value) / 2,
            length = parseInt(document.getElementById('inp-cylLength').value);
        alert('diameter ' + diameter + ' + length ' + length);

        cylinder.scale.x = diameter;
        cylinder.scale.y = diameter;
        cylinder.scale.z = length;
    } 
    //Script for 3D Cylinder 

    // revolutions per second
    var angularSpeed = 0.2;
    var lastTime = 0;

    var cylinder = null;
    // this function is executed on each animation frame
    function animate() {
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        cylinder.rotation.x += angleChange;
        cylinder.rotation.z += angleChange;
        lastTime = time;

        // render
        renderer.render(scene, camera);

        // request new frame
        requestAnimationFrame(function () {
            animate();
        });
    }

    // renderer
    var container = document.getElementById("container");
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(container.offsetWidth, container.offsetHeight);
    container.appendChild(renderer.domElement);

    // camera
    var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 700;

    // scene
    var scene = new THREE.Scene();

    // cylinder
    // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
    cylinder = new THREE.Mesh(new THREE.CylinderGeometry(150, 150, 500, 100, 100, false), new THREE.MeshPhongMaterial({
        // light
        specular: '#cccccc',
        // intermediate
        color: '#666666',
        // dark
        emissive: '#444444',
        shininess: 100
    }));
    cylinder.overdraw = true;
    cylinder.rotation.x = Math.PI * 0.2;
    //cylinder.rotation.y = Math.PI * 0.5;
    scene.add(cylinder);

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x444444);
    scene.add(ambientLight);

    // directional lighting
    var directionalLight = new THREE.DirectionalLight(0xcccccc);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // start animation
    animate();

这是相同的 fiddle :http://jsfiddle.net/b9Jmp/1/

如果您需要任何其他信息，请告诉我。

请提出建议。

Answer 1

这并不理想，但它在 editor 中的完成方式目前的方法是生成一个新的几何图形并替换旧的几何图形。

https://github.com/mrdoob/three.js/blob/master/editor/js/Sidebar.Geometry.CylinderGeometry.js#L69-L88