在THREE.js场景中鼠标向下平滑相机旋转

Question

我正在尝试实现与此http://showroom.littleworkshop.fr/

类似的平滑相机旋转效果

但是相机会在所有三个轴（偏转，俯仰和滚转）中旋转。

我的代码是：

var targetQuat = new THREE.Quaternion();

OnMouseDownHandler() {

    var mouseVector = new THREE.Vector3(VS.Mouse.x, VS.Mouse.y);
    mouseVector.unproject(VS.Camera);
    var dir = mouseVector.sub(VS.Camera.position).normalize();
    var oldPos = VS.Camera.position.clone();
    var cameraPosN = oldPos.normalize();

    var v1 = new THREE.Vector3(dir.x, dir.y, dir.z);
    var quaternion = new THREE.Quaternion();
    quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 4 );
    v1.applyQuaternion( quaternion );

    targetQuat.setFromUnitVectors(cameraPosN, v1);
}

///////////
renderLoop() {

    requestAnimationFrame(VS.RenderFrame);

    var deltaTime = VS.Clock.getDelta();

    VS.Camera.quaternion.slerp(targetQuat, deltaTime);
    ...
}