Load panorama with camera target at a specific x, y, z (and it stays there after click and drag)

Questions
, ,
1

I’m new to three.js and graphics in general.

I have a panorama image that loads by default where a doorknob is at the lower left of the canvas.

I want to load the panorama so that the doorknob shows in the center of the canvas instead.

I know that I can set the camera.target to the x, y, z of the doorknob on load of the panorama, and that works. However, as soon as the user initiates a click and drag, the target snaps back to the initial position and then drags from there. I need it to click and drag from the position I set.

I find that if I could calculate that initial lat and lng during the on load event, then the camera goes to the correct place during the animate function. Subsequent click and drag events run smoothly, without any snapping back to the original default position.

In this code, the lat/lng’s are defined only once the user has done a click and drag event.

I have the camera target x, y, z of the doorknob. How do I calculate that initial lat/lng from the x, y, z, before the user has done anything?

I’m not sure what info you need, but here is some of the code:

I’m using PerspectiveCamera and SphereGeometry.

export function animate() {
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lng);

camera.target.x = 500 * Math.sin(phi) * Math.cos(theta);
camera.target.y = 500 * Math.cos(phi);
camera.target.z = 500 * Math.sin(phi) * Math.sin(theta);

camera.lookAt(camera.target);
renderer.render(scene, camera);

}

function onDocumentMouseDown(event) {
onMouseDownX = event.clientX;
onMouseDownY = event.clientY;
onMouseDownLat = lat;
onMouseDownLng = lng;
}

function onDocumentMouseMove(event) {
if (isMouseDown) {
var factor = 0.025 + (camera.fov - 15) * 0.00125
lat = (event.clientY - onMouseDownY) * factor + onMouseDownLat;
lng = -(event.clientX - onMouseDownX) * factor + onMouseDownLng;
}
}