绕 X 轴旋转相机（three.js）答案

【问题标题】：Rotating camera around the X-axis (three.js)绕 X 轴旋转相机（three.js）
【发布时间】：2012-07-23 20:00:40
【问题描述】：

我正在尝试将相机旋转到场景的 X 轴。
此时我的代码是这样的：

rotation += 0.05;
camera.position.y = Math.sin(rotation) * 500;
camera.position.z = Math.cos(rotation) * 500;

这会使相机四处移动，但在旋转过程中会发生一些奇怪的事情，相机会翻转，或者它会跳过它所跟随的假想圆圈的某些部分。

【问题讨论】：

标签： camera rotation three.js

【解决方案1】：

你只提供了一个sn-p的代码，所以我必须对你在做什么做一些假设。

这段代码：

rotation += 0.05;
camera.position.x = 0;
camera.position.y = Math.sin(rotation) * 500;
camera.position.z = Math.cos(rotation) * 500;
camera.lookAt( scene.position ); // the origin

将导致您提到的“翻转”，因为相机试图保持“正面朝上”，并且在经过“北极”时会迅速改变方向。

如果你像这样偏移相机的 x 坐标，

camera.position.x = 200;

相机的行为对您来说会更自然。

【讨论】：

nop，不幸的是它不起作用，但我认为你对相机的“向上”向量是正确的。因为它需要围绕场景旋转，所以向上向量需要从 +y 轴变为 -y 轴，我不知道该怎么做..

【解决方案2】：

Three.js 试图让摄像头朝上。当您沿 z 轴传递 0 时，它将“修复”相机的旋转。您可以手动检查和重置相机的角度。

camera.lookAt( scene.position ); // the origin
if (camera.position.z < 0) {
    camera.rotation.z = 0;
}

我确信这不是最好的解决方案，但如果其他人在玩 three.js 时遇到这个问题（就像我刚刚做的那样），它会更进一步。

【讨论】：

【解决方案3】：

这对我有用，我希望它有所帮助。

绕 X 轴旋转：

var x_axis = new THREE.Vector3( 1, 0, 0 );
var quaternion = new THREE.Quaternion;
camera.position.applyQuaternion(quaternion.setFromAxisAngle(x_axis, rotation_speed));
camera.up.applyQuaternion(quaternion.setFromAxisAngle(x_axis, rotation_speed));

绕 Y 轴旋转：

var y_axis = new THREE.Vector3( 0, 1, 0 );
camera.position.applyQuaternion(quaternion.setFromAxisAngle(y_axis, angle));

绕 Z 轴旋转：

var z_axis = new THREE.Vector3( 0, 0, 1 );
camera.up.applyQuaternion(quaternion.setFromAxisAngle(z_axis, angle));

【讨论】：

值得注意的是，轴必须先归一化，否则你仍然会得到奇怪的结果或者根本没有旋转。之后它就像一个魅力。
你如何让它围绕所有 3 个方向旋转？

【解决方案4】：

我想将相机移动到新位置，同时让相机查看特定对象，这就是我想出的[确保加载tween.js]：

/**
* Helper to move camera
* @param loc Vec3 - where to move the camera; has x, y, z attrs
* @param lookAt Vec3 - where the camera should look; has x, y, z attrs
* @param duration int - duration of transition in ms
**/

function flyTo(loc, lookAt, duration) {
  // Use initial camera quaternion as the slerp starting point
  var startQuaternion = camera.quaternion.clone();
  // Use dummy camera focused on target as the slerp ending point
  var dummyCamera = camera.clone();
  dummyCamera.position.set(loc.x, loc.y, loc.z);
  // set the dummy camera quaternion
  var rotObjectMatrix = new THREE.Matrix4();
  rotObjectMatrix.makeRotationFromQuaternion(startQuaternion);
  dummyCamera.quaternion.setFromRotationMatrix(rotObjectMatrix);
  dummyCamera.up.set(camera)
  console.log(camera.quaternion, dummyCamera.quaternion);
  // create dummy controls to avoid mutating main controls
  var dummyControls = new THREE.TrackballControls(dummyCamera);
  dummyControls.target.set(loc.x, loc.y, loc.z);
  dummyControls.update();
  // Animate between the start and end quaternions
  new TWEEN.Tween(camera.position)
    .to(loc, duration)
    .onUpdate(function(timestamp) {
      // Slerp the camera quaternion for smooth transition.
      // `timestamp` is the eased time value from the tween.
      THREE.Quaternion.slerp(startQuaternion, dummyCamera.quaternion, camera.quaternion, timestamp);
      camera.lookAt(lookAt);
    })
    .onComplete(function() {
      controls.target = new THREE.Vector3(scene.children[1].position-0.001);
      camera.lookAt(lookAt);
    }).start();
}

示例用法：

var pos = {
  x: -4.3,
  y: 1.7,
  z: 7.3,
};
var lookAt = scene.children[1].position;
flyTo(pos, lookAt, 60000);

然后在您的update()/render() 函数中，调用TWEEN.update();

Full example

【讨论】：