CODEWITHSUNDEEP
javascriptangulartypescriptthree.jsgltf
Keanu Jooste
Keanu Jooste

Reputation: 25

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

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.

Upvotes: 1

Views: 800

Answers (1)

prisoner849
prisoner849

Reputation: 17596

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

Upvotes: 2

Related Questions