I am trying to create a 360 viewer for a specific product using a 3D object. The goal is to rotate the camera around the object at a 45-degree angle per click in the correct direction. However, I am facing difficulties with this task.
Camera:
this.camera.rotation.y = 15 / 180 * Math.PI;
this.camera.position.x = 0;
this.camera.position.y = 500;
this.camera.position.z = 1200;
this.camera.lookAt(0, 0, 0);
Button Click Methods:
onRightClicked() {
const newCamPosition = (this.camera.position.x + degToRad(45)) * 10;
this.camera.position.x = newCamPosition;
this.camera.position.y = 500;
this.camera.position.z = 1200;
}
onLeftClicked() {
const newCamPosition = (this.camera.position.x - 150);
this.camera.position.x = newCamPosition;
this.camera.position.y = 500;
this.camera.position.z = 1200;
}
Although everything seems to be functioning properly, my camera isn't rotating by 45 degrees per click as intended. I suspect that the issue lies within the camera.rotation.y, but being a beginner with threejs, I'm unsure of what exactly is causing this problem.