How can i make my camera rotation y in threejs equal to 360?

Question

I want to ake a 360 viewer of a certain product so i have a 3d object and i want to rotate my camera around the object with 45 degrees per click in the appropriate direction but i am having trouble with it.

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;
  }

Everything is working but my camera is not going in 45 degrees per click. I think the fault is in the camera.rotation.y but i am a beginner with threejs and i do not know what is going on.

Answer 1

Maybe something like this with .applyAxisAngle() :

var axis = new THREE.Vector3(0, 1, 0);
var step = Math.PI * 0.25;

onRightClicked() {
  this.camera.position.applyAxisAngle(axis, step);
}

onLeftClicked() {
  this.camera.position.applyAxisAngle(axis, -step);
}