使用时 Orbitcontrols 阻尼会受到影响 tween.js

Question

我有一个带有立方体的简单场景。使用 Orbitontrols 并启用阻尼以实现更平滑的旋转。当使用 tween.js 单击按钮时，我编写了一个函数来将相机动画到一个新位置。但是每次相机动画时阻尼似乎都在减少。

这是我的代码

var container;


var camera, scene, renderer;
  var controls;
  var cube;
  init();
  animate();
  function init() {
    container = document.getElementById( 'webgl_div' );

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 500;
    camera.position.y = 0;
    camera.position.x = 0;

    scene = new THREE.Scene();

    cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshNormalMaterial() );
    scene.add(cube);

    var ambient = new THREE.AmbientLight( 0x101030 );
    scene.add( ambient );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth/1.2, window.innerHeight/1.2 );
    controls = new THREE.OrbitControls( camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.enableZoom = true;
    controls.rotateSpeed = .1;
    container.appendChild( renderer.domElement );
  }
  function animate() {
    requestAnimationFrame( animate );
    controls.update();
    TWEEN.update();
    render();
  }
  function render() {
    renderer.render( scene, camera );
  }
  function rotate_camera() {
    var tween = new TWEEN.Tween(camera.position)
    .to({ x: 0, y: 0, z: 600 }, 1000)
    .start();
    animate();
  }

Html代码：

<div class="row">
        <div class="col-md-10" id="webgl_div">
        </div>
        <div class="col-md-2">
          <div class="row">
            <div class="col-md-12">
              <button type="button" id="rotate_camera_btn">Rotate Camera</button>
            </div>
          </div>
        </div>
      </div>

按钮点击事件(jquery)

$("#rotate_camera_btn").click(function(){
      rotate_camera();
     })

如何纠正？还是性能问题？我不明白为什么会这样！

Answer 1

问题是我在 rotate_camera() 中调用 animate()。这减慢了场景。删除它，一切正常

使用时 Orbitcontrols 阻尼会受到影响 tween.js

Orbitcontrols damping is affected when used tween.js

jquery

three.js

tween.js