添加轨道控件后，绘制圆柱体的功能不起作用

Question

我想在场景中添加一个Orbitcotrol，但是当我添加它时，我的功能（在此之前运行良好）不再起作用。

这是我应该执行的功能。

function DrawMesh(){
    ClearMesh();

    //langsLoop

    var langsMaas =  document.getElementById("longSpacing").value;
    var aantalLangs = document.getElementById('longAmount').innerHTML;
    var langsDiameter = document.getElementById("langsDiameter").value;
    var onderRandRooster = 59;
    var scale = 0.03;
    for (i = 0; i < aantalLangs; i++) { 

    var geometry = new THREE.CylinderGeometry( (langsDiameter * scale), (langsDiameter * scale) , langsLengte * scale , 20 );
    var material = new THREE.MeshBasicMaterial( {color: 0xffe26f} );
    var cylinder = new THREE.Mesh( geometry, material );
    cylinder.userData.type = 'cylinder';

    scene.add( cylinder );

    cylinder.position.set( 0 , 0 ,onderRandRooster);
    onderRandRooster -= (langsMaas * scale);
    cylinder.rotation.z = Math.PI / 2;
}


    //dwarsLoop

    var lengte2 = document.getElementById("transLength").value;
    var dwarsMaas =  document.getElementById("transSpacing").value;
    var dwarsDiameter = document.getElementById("dwarsDiameter").value
    var aantalLangs = document.getElementById('transAmount').innerHTML;

    var i;
    var z = 90;


    for (i = 0; i < aantalLangs; i++)
    { 

    var geometry2 = new THREE.CylinderGeometry( dwarsDiameter * scale , dwarsDiameter * scale , lengte2*scale , 20 );
    var material2 = new THREE.MeshBasicMaterial( {color: 0xe4734f} );
    var cylinder2 = new THREE.Mesh( geometry2, material2 );
    cylinder2.userData.type = 'cylinder';

    scene.add( cylinder2 );

    cylinder2.position.set( z , 1 , 23);
    z -= (dwarsMaas*scale);
    cylinder2.rotation.x = Math.PI / 2;
}
}

这是我的init函数，必须添加它才能使orbitcontrol正常工作。如您在这里看到的，我添加了“ drawmesh”，但是它什么也没做，我也尝试在该处对接我的函数，但这还是行不通的。

if ( WEBGL.isWebGLAvailable() === false ) {
                document.body.appendChild( WEBGL.getWebGLErrorMessage() );
            }
    var camera, controls, scene, renderer;
    init();
    render();
    animate();
    function init() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0x000000 );
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.set( 0, 120, 70 );

        // controls
        controls = new THREE.OrbitControls( camera, renderer.domElement );

        //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
        controls.screenSpacePanning = false;
        controls.minDistance = 100;
        controls.maxDistance = 500;
        controls.maxPolarAngle = Math.PI / 2;

        // world
    var size = 100 ;
    var step = 1 ;

    var geometry = new THREE.Geometry();
    var material = new THREE.LineBasicMaterial({color:0x808080});

    //rooster
    for ( var i = - size; i <= size; i += step){
    geometry.vertices.push(new THREE.Vector3(- size, - 0.04, i ));
    geometry.vertices.push(new THREE.Vector3( size, - 0.04, i ));

    geometry.vertices.push(new THREE.Vector3( i, -0.04, -size));
    geometry.vertices.push(new THREE.Vector3( i, - 0.04, size ));

}

    var line = new THREE.LineSegments( geometry, material, THREE.LinePieces );
    scene.add(line);

    DrawMesh()

                // lights

                var light = new THREE.AmbientLight( 0x222222 );
                scene.add( light );
                //
                window.addEventListener( 'resize', onWindowResize, false );
            }