Setting New Dimension using Jquery or Javascript for CylinderGeometry from Three.js

问题

I am trying to change the Dimension at Run time for cylinder created from the examples of Three.js. and the code I am trying is not working:

Here is my code: 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();

Here is the Fiddle for the same: http://jsfiddle.net/b9Jmp/1/

Let me know if you need any other information.

Please suggest.

回答1:

It's not ideal, but the way its done in the editor at the moment is by generating a new geometry and replacing the old one.

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

回答2:

based in this answer:

How do I create resizable objects in THREE.JS

you can add your mesh to a 3dObject and then apply a specific scale to each direction so you code will be:

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

            cylinderBody.scale.x = diameter;
            cylinderBody.scale.y = diameter;
            cylinderBody.scale.z = length;
        }

      ...

      var cylinder = null;
      var cylinderBody = new THREE.Object3D(); 
      ....

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

     cylinderBody.add(cylinder);
...

来源：https://stackoverflow.com/questions/21788385/setting-new-dimension-using-jquery-or-javascript-for-cylindergeometry-from-three