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

The problem was I was calling animate() in rotate_camera() .This slowed down the scene. Removed it and everything works fine

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

1 个答案: