如何在Three.js中减慢/设置对象旋转的动画？

Question

如果您在three.js中单击一个球形点，我将尝试为门的开口制作动画。单击球形网格时，我设法使门旋转，但是旋转得很快。我没有看到它的旋转，而是看到它以正确的最终角度出现。

我是否有办法减慢旋转速度？这样我就可以看到门旋转了吗？

我只是在学习three.js，所以不确定是否可以。

我认为，如果将旋转角度放入循环中会降低速度，但不会。

下面的所有代码都在init（）函数中。

    clock = new THREE.Clock();                        
    var loader = new THREE.GLTFLoader();
    var angle = 2;
    loader.load('THECHOCOLATEDOORGLTF.glb', function(gltf){
    door = gltf.scene.children[0];
    door.scale.set(25,25,25);
    scene.add(gltf.scene);
    door.position.z -=0;
    door.position.x = 0;
    door.rotation.setFromVector3(new THREE.Vector3( 0, Math.PI / angle,0));
    animate();
    });



    const geometry = new THREE.SphereGeometry(10, 20, 10);
    const material = new THREE.MeshNormalMaterial({wireframe: true});
    sphere = new THREE.Mesh(geometry, material);
    sphere.position.x = -200;
    sphere.position.y = 200;
    scene.add(sphere);

    domEvents = new THREEx.DomEvents(camera, renderer.domElement);
    let sphereClicked = false;
    domEvents.addEventListener(sphere, 'click', event => {

    var time = clock.getElapsedTime();
    var delta = clock.getDelta();



      if (!sphereClicked ){
        while ( angle > 1.1) {
          angle = angle - delta * Math.PI / 180;
        }

        door.rotation.setFromVector3(new THREE.Vector3( 0, Math.PI / angle,0));
        sphereClicked = true;
      }
      else {
        door.rotation.setFromVector3(new THREE.Vector3( 0, Math.PI / 2,0));
        sphereClicked = false;
      }
    });