如何使 threejs 中的相机旋转 y 等于 360？

Question

我想制作某个产品的 360 度查看器，所以我有一个 3d 对象，我想在适当的方向上每次单击 45 度围绕该对象旋转我的相机，但我遇到了麻烦。

相机：

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

按钮点击方法：

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

一切正常，但我的相机每次点击都不会旋转 45 度。我认为问题出在 camera.rotation.y 但我是 threejs 的初学者，我不知道发生了什么。

Answer 1

也许与 .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);
}

如何使 threejs 中的相机旋转 y 等于 360？

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

javascript

three.js

typescript

gltf

angular