Not able to rotate or pan my panorama in three js

Question

I am not using the default code to do camera rotation in three js which is

lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
camera.target.x = 100 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 100 * Math.cos( phi );
camera.target.z = 100 * Math.sin( phi ) * Math.sin( theta );

Instead I am doing lookVector.applyAxisAngle(axis, 0.001); and so I think I am not able to pan the 360 image with mouse. I have put my code in fiddle https://jsfiddle.net/sh60yqfx/32/ Please help.. thanks

Answer 1

Made below changes & it seems to be working. Please try locally.

function onPointerUp( event ) {
    isUserInteracting = false;
}

 function onPointerMove( event ) {
    if ( isUserInteracting === true ) {
        var clientX = event.clientX || event.touches[ 0 ].clientX;
        var clientY = event.clientY || event.touches[ 0 ].clientY;
        lon = ( onMouseDownMouseX - clientX ) * 0.1 + onMouseDownLon;
        lat = ( clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
    }
}

Need to stop interlacing when user stops moving the mouse (or touch ends)

function render() {            
        lookVector.set(lon,lat,11);
        lookVector.applyAxisAngle(axis, 0.001);         
        camera.lookAt(lookVector);
        renderer.render(scene, camera);            
}

In the render() function set the lookVector values based on lon &lat & then make the camera to lookAt the lookVector.