three.js，补间相机和mousemove事件

我正在尝试使用three.js

我正在使用补间移动相机，它工作得很好 . 但是，在动画结束时，相机会跳回到初始位置 .

我发现mousemove事件导致了这种行为 . 我如何解决这个问题并保持补间动作和鼠标移动？

我根据this example构建了我的three.js;

Mousemove declared inside render function

function render() {

    camera.position.x += ( mouseX - camera.position.x ) * 0.04;
    camera.position.y += ( - mouseY - camera.position.y ) * 0.04;
    camera.lookAt( scene.position );

    TWEEN.update();

    renderer.render( scene, camera );
}

Tween movement

function setupTween (position, target, duration) {
    TWEEN.removeAll();

    new TWEEN.Tween (position)
            .to (target, duration)
            .easing (TWEEN.Easing.Quadratic.InOut)
            .onUpdate (
                    function() {
                        // copy incoming position into camera position
                        camera.position.copy (position);
                    })
            .start();
};

补间功能源

UPDATE

完整的工作代码：

<script>

    var container,
            i,
            camera,
            scene,
            renderer,
            particles,
            geometry,
            materials = [],
            color,
            sprite,
            size,
            mouseX = 0,
            mouseY = 0,
            isTweening,
            windowHalfX = window.innerWidth / 2,
            windowHalfY = window.innerHeight / 2;

    // +++++ three.js +++++
    // +++++ +++++ +++++ +++++ +++++
    function init() {
        container = document.createElement( 'div' );
        document.body.appendChild( container );
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.5, 2000 );
        camera.position.set (0,0,1900);

        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2( 0x000000, 0.0005 );
        geometry = new THREE.Geometry();
        var textureLoader = new THREE.TextureLoader();
        for ( i = 0; i < 1000; i ++ ) {
            var vertex = new THREE.Vector3();
            vertex.x = Math.random() * 2000 - 1000;
            vertex.y = Math.random() * 2000 - 1000;
            vertex.z = Math.random() * 2000 - 1000;
            geometry.vertices.push( vertex );
        }




        sprite = textureLoader.load( "circle.png" );
        color  = [0.90, 0.05, 0.8];
        size   = 8.5;
        materials = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : false } );
        materials.color.setHSL( color[0], color[1], color[2] );
        particles = new THREE.Points( geometry, materials );
        scene.add( particles );


        renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setPixelRatio( window.devicePixelRatio );

        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    }
    function onWindowResize() {
        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }
    function onDocumentMouseMove( event ) {
        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function startTween() {

        isTweening = false;

        var target = new THREE.Vector3(getRandomNumber(), getRandomNumber(), getRandomNumber());

        new TWEEN.Tween (camera.position.clone())
                .to (target, 1000)
                .easing (TWEEN.Easing.Quadratic.InOut)
                .onUpdate( function() {
                    camera.position.copy(this);
                })
                .onStart ( function() {
                    isTweening = true;
                })
                .onComplete ( function() {
                    isTweening = false;
                })
                .start();
    }

    function getRandomNumber() {
        // get a number between -1000 and -500 and 500 and 1000
        return ( Math.random() * 500 + 500 ) * ( Math.random() < 0.5 ? -1 : 1 );
    }

    function render() {

        if(!isTweening && (mouseX || mouseY)) {
            // more a generic approach, not just transforming x and y (maybe it needs to be improved a bit)
            var upVector = camera.up.clone().transformDirection(camera.matrix);
            var forwardVector = new THREE.Vector3().subVectors(scene.position, camera.position).normalize();
            var rightVector = new THREE.Vector3().crossVectors(forwardVector, upVector);

            camera.translateOnAxis(rightVector, mouseX);
            camera.translateOnAxis(upVector, -mouseY);
            mouseX = mouseY = 0;
        }
        camera.lookAt( scene.position );

        TWEEN.update();

        renderer.render( scene, camera );
    }

    init();
    animate();


    setTimeout(function(){
        startTween();
    },2500);

</script>