I have a panorama. I have an object on that panorama, and I have the xyz position of the object.
On the onload event of the panorama, the camera sets to a default position, if I give it no instructions to do otherwise.
I want the camera to point to my object on the onload event of the panorama. I have done this successfully by setting camera.target:
camera.target.set(object.x, object.y, object.z);
camera.lookAt(camera.target);
renderer.render(scene, camera);
My problem is that when the user does their first click and drag, the camera snaps back to the default position, then moves from there as the user drags. THIS IS MY QUESTION: How do I make the camera move from the object, not from that default position?
Here is some of the three.js code I've been using. It is not complete (which is lengthy), but I just want you to see my general approach. 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) {
var factor = 0.025 + (camera.fov - 15) \* 0.00125;
lat = (event.clientY - onMouseDownY) \* factor + onMouseDownLat;
lng = -(event.clientX - onMouseDownX) \* factor + onMouseDownLng;
}
lat and lng are defined only by previous click and drag events. I don't have lat/lng or previous lat/lng when the user has never initiated any click and drag events. This is what causes the snapping back to the default position when the user does their first click and drag.
I have been working only with camera target, not camera position or camera rotation. (Maybe I should?)
I have searched extensively and do not see a solution to my problem. Being completely new to three.js and 3D graphics, I might not be asking the right question.
I have already seen this blog:
However, it does not give enough information to implement.
Any suggestion at all would be appreciated. Perhaps I should consider a completely different approach.