Currently, I am working on a JavaScript application that allows users to design their own closet. My goal is to enable smooth rotation of the closet without changing the distance from the camera to the closet. While it would be simple to rotate the object itself, this is not feasible due to the different origins of the meshes. Instead, I have concluded that rotating the camera around the closet as if on a sphere is the solution. Therefore, my aim is to calculate the exact position the camera must be in based on any longitude and latitude provided by the user. The result, however, is a rather peculiar rotation effect. You can view the current version of the application here (please note that it does not work with IE at the moment). The relevant code snippet is provided below. It's worth mentioning that I found similar formulas online, checked and verified them multiple times. One thing that remains consistent is the constant distance (radius) to the offset point (xOffset, yOffset, zOffset), yet the rotation appears quite odd. I came across a similar question on Stack Overflow, but adopting their formulas did not improve the situation either.
Pseudo Code:
x = xOffset + radius * cos(longitude) * cos(latitude)
y = yOffset + radius * cos(longitude) * sin(latitude)
z = zOffset + radius * sin(longitude)
camera.lookAt(xOffset, yOffset, zOffset)
Relevant Code (note: degrees are converted to radians):
var lon = 30;
var lat = -90;
var cameraRadius = 400;
function cameraReposition() {
var lon = dimensions.lon;
var lat = dimensions.lat;
camera.position.x = cameraX + cameraRadius * Math.cos(Math.PI * lon / 180) * Math.cos(Math.PI * lat / 180);
camera.position.y = cameraY + cameraRadius * Math.cos(Math.PI * lon / 180) * Math.sin(Math.PI * lat / 180);
camera.position.z = cameraZ + cameraRadius * Math.sin(Math.PI * lon / 180);
camera.lookAt(new THREE.Vector3(cameraX, cameraY, cameraZ));
}
$('#visiblecanvas').mousemove(function(e){
if(mousedown || rightMousedown) {
var clickX = e.pageX - this.offsetLeft;
var clickY = e.pageY - this.offsetLeft;
lon += (clickY - lastY) / 10;
lat -= (clickX - lastX) / 10;
lastY = clickY;
lastX = clickX;
if (lon > 360)
lon -= 360;
if (lon < -360)
lon += 360;
if (lat > 360)
lat -= 180;
if (lat < -360)
lat += 360;
}
});
It's important to note that the adjustment made to lon and lat when they exceed 360 is currently irrelevant as both values are controlled via the GUI for debugging purposes.
EDIT: Fixed the incorrect link to the application!