通过鼠标和补间冲突旋转对象

Question

我正在用鼠标拖动（鼠标按下）旋转对象。也可以使用外部按钮在同一对象之间进行补间 起作用，但是在运行补间之后，对象“捕捉”回其先前的旋转值：i将myscene的rotation.y补间为“ 1.5”，然后旋转回去。如果我多次用鼠标旋转“ myscene”，则补间将更加快​​速地弹回。

如果我在render（）中删除

myscene.rotation.y += ( targetRotation - myscene.rotation.y ) * 0.09;

补间正常运行。

var myscene, camera, scene, renderer, container;
var mouseX = 0, mouseY = 0;
var group = new THREE.Group;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();

var projector, mouse = {
    x: 0,
    y: 0
  },
  INTERSECTED;

var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseXOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

var clock = new THREE.Clock();

function init() {

container = document.getElementById('buehne');
scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1500 ); 
camera.position.set( -100, 300, -300 ); 

scene.add( camera );
camera.lookAt(new THREE.Vector3(myscene));


var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
    $('#loader').fadeOut(2000);
};
var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log( Math.round(percentComplete, 2) + '% downloaded' );
    }
};
var onError = function ( xhr ) {
};

var loader = new THREE.OBJLoader(manager);
loader.load( 'obj.obj', function ( object ) {
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.geometry.computeVertexNormals(); 
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });
    scene.add(object);
    myscene = object;

}, onProgress, onError );

renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true });
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.domElement.id = 'mainscene';

window.addEventListener('resize', onWindowResize, false );
container.addEventListener( 'mousedown', onDocumentMouseDown, false );
container.addEventListener( 'touchstart', onDocumentTouchStart, false );
container.addEventListener( 'touchmove', onDocumentTouchMove, false );
container.addEventListener('mousemove', mouseHover, false);

} 

document.getElementById('b_button').addEventListener('click',function(e) {

    console.log('before: myscene.rotation.y ='+myscene.rotation.y);

    var tween = new TWEEN.Tween(myscene.rotation).to({y: 1.5},1000).easing(TWEEN.Easing.Cubic.InOut)
    .onUpdate(function () {})
    .onComplete(function () {
        console.log('after: myscene.rotation.y ='+myscene.rotation.y);
    })
    .start();


}, false);


function mouseHover(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function onDocumentMouseDown( event ) {
    event.preventDefault();
    container.addEventListener( 'mousemove', onDocumentMouseMove, false );
    container.addEventListener( 'mouseup', onDocumentMouseUp, false );
    container.addEventListener( 'mouseout', onDocumentMouseOut, false );
    mouseXOnMouseDown = event.clientX - windowHalfX;

    targetRotationOnMouseDown = targetRotation;

    mouseX = ( event.clientX - windowHalfX ) / 2;
    mouseY = ( event.clientY - windowHalfY ) / 2;

    mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
    mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
}


function onDocumentMouseMove( event ) {
    mouseX = event.clientX - windowHalfX;
    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02; //  0.02
}

function onDocumentMouseUp( event ) {
    container.removeEventListener( 'mousemove', onDocumentMouseMove, false );
    container.removeEventListener( 'mouseup', onDocumentMouseUp, false );
    container.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}

function onDocumentMouseOut( event ) {
    container.removeEventListener( 'mousemove', onDocumentMouseMove, false );
    container.removeEventListener( 'mouseup', onDocumentMouseUp, false );
    container.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}

function onDocumentTouchStart( event ) {
    if ( event.touches.length === 1 ) {
        event.preventDefault();
        mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
        targetRotationOnMouseDown = targetRotation;

        mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
        mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
    }
}

function onDocumentTouchMove( event ) {
    if ( event.touches.length === 1 ) {
        event.preventDefault();
        mouseX = event.touches[ 0 ].pageX - windowHalfX;
        targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
    }
}

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


function render() {
    if (myscene) {
        var time = Date.now() * 0.0005;
        var delta = clock.getDelta();

        myscene.rotation.y += ( targetRotation - myscene.rotation.y ) * 0.09; // 0.05
        console.log('myscene.rotation.y= '+myscene.rotation.y);

        myscene.rotation.z = Math.cos( time * 1 ) * 0.02;
        myscene.position.y = Math.cos( time * 1 ) * 2;

    }
    TWEEN.update();
    scene.updateMatrix();
    renderer.render(scene,camera ); 
}