1

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

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

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

4

4 回答 4

5

你只提供了一段代码，所以我必须对你在做什么做一些假设。

这段代码：

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;

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

于 2012-07-25T18:13:10.877 回答
3

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

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

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

于 2013-01-15T21:13:41.960 回答
2

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

绕 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));
于 2019-04-24T15:00:28.630 回答
1

我想将相机移动到新位置，同时让相机查看特定对象，这就是我想出的[确保加载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();

完整示例

于 2019-02-08T16:34:56.030 回答