如何使相机更新变焦

Question

我终于找到了如何使用鼠标滚动进行缩放，但是只有当我通过单击并拖动移动摄像机时，摄像机才会更新缩放级别。

我尝试从three.js示例复制粘贴代码，尝试使用其他浏览器，尝试添加controls.update（）；渲染和gameloop函数，我尝试使用Google搜索。

    var renderer = new THREE.WebGLRenderer( );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // check when the browser size has changed and adjust the camera accordingly
    window.addEventListener( 'resize', function( )
    {
        var WIDTH = window.innerWidth;
        var HEIGHT = window.innerHeight;
        renderer.setSize( WIDTH, HEIGHT );
        camera.aspect = WIDTH / HEIGHT;
        camera.updateProjectionMatrix( );
    } );

    scene.add( new THREE.AmbientLight( 0x00020 ) );

            var controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.addEventListener( 'change', render ); // use only if there is no animation loop
            controls.minDistance = 10;
            controls.maxDistance = 200;
            controls.enableZoom = true;


    camera.position.z = 7;

    // CUBE
    var geometry = new THREE.CubeGeometry( 2, 2, 2 );
    var cubeMaterials =
    [
        new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'img/1.png' ), side: THREE.DoubleSide } ), // Right side
        new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader( ).load( 'img/2.png' ), side: THREE.DoubleSide } ), // Left side
        new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'img/3.png' ), side: THREE.DoubleSide } ), // Top side
        new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader( ).load( 'img/4.png' ), side: THREE.DoubleSide } ), // Bottom side
        new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'img/5.png' ), side: THREE.DoubleSide } ), // Front side
        new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader( ).load( 'img/6.png' ), side: THREE.DoubleSide } ) // Back side
    ];

    // Create a MeshFaceMaterial, which allows the cube to have different materials on each face
    var cubeMaterial = new THREE.MeshFaceMaterial( cubeMaterials );
    var cube = new THREE.Mesh( geometry, cubeMaterial );
    scene.add( cube );

    // Floor
    var floorGeometry = new THREE.CubeGeometry( 496, 1, 350 );
    var floorMaterial = new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'images/ctr.png' ), side: THREE.DoubleSide } );
    var floorCube = new THREE.Mesh( floorGeometry, floorMaterial );
    floorCube.position.y = -5;
    scene.add( floorCube );


    var ambientLight = new THREE.AmbientLight( 0xFFFFFF, 5.0 );
    scene.add(ambientLight);


    var light1 = new THREE.PointLight( 0xff0040, 4, 50 );
    //scene.add( light1 );

    var light2 = new THREE.PointLight( 0x0040ff, 3, 50 );
    //scene.add( light2 );

    var light3 = new THREE.PointLight( 0x80ff80, 4, 50 );
    //scene.add( light3 );


    var directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 1 );
    directionalLight.position.set( 0, 1, 0 );
    //scene.add( directionalLight );

    var spotLight = new THREE.SpotLight( 0xFF45F6, 25 );
    spotLight.position.set( 0, 3, 0 );

    scene.add( spotLight );


    // game logic
    var update = function( )
    {
        //cube.rotation.x += 0.01;
        //cube.rotation.y += 0.005;

        var time = Date.now( ) * 0.0005;

        light1.position.x = Math.sin( time * 0.7 ) * 30;
        light1.position.y = Math.cos( time * 0.5 ) * 40;
        light1.position.z = Math.cos( time * 0.3 ) * 30;

        light2.position.x = Math.cos( time * 0.3 ) * 30;
        light2.position.y = Math.sin( time * 0.5 ) * 40;
        light2.position.z = Math.sin( time * 0.7 ) * 30;

        light3.position.x = Math.sin( time * 0.7 ) * 30;
        light3.position.y = Math.cos( time * 0.3 ) * 40;
        light3.position.z = Math.sin( time * 0.5 ) * 30;
    };

    // draw scene
    var render = function( )
    {
        renderer.render( scene, camera );
    };

    // run game loop (update, render, repeat)
    var GameLoop = function( )
    {
        requestAnimationFrame( GameLoop );

        update( );
        render( );
    };

    GameLoop( );





</script>

我真的很希望能够在滚动时立即放大，而仅在执行平移时才更新。