Not able to rotate or pan my panorama in three js

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

1 Answers

Answers 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.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati