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();

以下是相同的小提琴：http://jsfiddle.net/b9Jmp/1/

如果您需要任何其他信息，请与我们联系。

请建议。

Answer 1

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

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

Answer 2

基于这个答案：

How do I create resizable objects in THREE.JS

您可以将网格物体添加到3dObject，然后将特定比例应用于每个方向，以便您编码：

    ...
    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);
...

使用Jquery或Javascript为Three.js中的CylinderGeometry设置新维度

2 个答案: