three.js相机的位置和朝向

three.js 相机的位置和朝向可以通过设置相机的位置和目标点来实现。相机的位置可以通过 `camera.position.set(x, y, z)` 来设置，其中 `x`、`y`、`z` 分别代表相机在三个坐标轴上的位置。相机的朝向可以通过 `camera.lookAt(target)` 方法来设置，其中 `target` 是一个表示相机要对准的目标点的 Vector3 对象。

示例代码：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 设置相机位置
camera.position.set(0, 0, 10);

// 设置相机朝向
const target = new THREE.Vector3(0, 0, 0);
camera.lookAt(target);

上述代码将创建一个透视相机，将其位置设置为 (0, 0, 10)，然后将其朝向设置为原点 (0, 0, 0)。

相关问题

three.js相机的移动朝向不变

### three.js 中相机移动时保持朝向不变

在 Three.js 应用程序中，当需要使相机关于特定对象或方向始终保持一致的方向时，可以利用 `lookAt` 方法以及通过更新旋转矩阵来实现这一效果。对于希望相机在移动过程中始终指向某个固定位置的情况，可以在每一帧渲染循环里调用此方法。

// 创建一个目标点用于 camera look at 的位置
const target = new THREE.Vector3(0, 0, 0);

function animate() {
    requestAnimationFrame(animate);
    
    // 更新相机的位置或其他属性...
    camera.position.x += someValue;
    camera.position.y += anotherValue;

    // 让相机每帧都看向设定的目标点
    camera.lookAt(target); 

    renderer.render(scene, camera);
}

如果目的是让相机沿着路径前进而不改变其初始视角，则可以通过锁定相机的角度偏移量，在每次位移之后重新应用这些角度差值：

let initialRotationX = camera.rotation.x; // 初始俯仰角
let initialRotationY = camera.rotation.y; // 初始方位角

function moveCamera(dx, dy, dz) {
    const originalPosition = camera.position.clone();
    
    // 执行实际的平移操作前保存当前位置
    
    camera.translateZ(dz);
    camera.translateX(dx);
    camera.translateY(dy);
    
    // 将新的位置设置回去，并恢复原始的旋转状态
    camera.position.copy(originalPosition);
    camera.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), dx * Math.PI / 180);
    camera.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), dy * Math.PI / 180);
    camera.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), dz * Math.PI / 180);
    
    // 恢复最初的旋转角度
    camera.rotation.set(initialRotationX, initialRotationY, 0);
}

renderer.setAnimationLoop(() => {
    // 调用 moveCamera 函数来进行受控运动
});

上述两种方式都可以有效地帮助开发者控制相机的行为，使其能够在移动的同时维持固定的观察方向[^1]。

three.js的相机

### Three.js 相机概述

在 Three.js 中，`THREE.Camera` 是所有相机的抽象基类。具体实现分为两种主要类型：正交相机 (`THREE.OrthographicCamera`) 和透视相机 (`THREE.PerspectiveCamera`) [^1]。

#### 正交相机 (Orthographic Camera)

正交相机的特点是在视图中不会产生近大远小的效果，即物体不论距离摄像机多远，在画面中的大小保持不变。创建一个正交相机需要指定六个参数：

const camera = new THREE.OrthographicCamera(
    left,   // 左边界
    right,  // 右边界
    top,    // 上边界
    bottom, // 下边界
    near,   // 近裁剪面
    far     // 远裁剪面
);

这种类型的相机会使得场景看起来像是二维平面图，适用于不需要深度效果的应用场合 [^3]。

#### 透视相机 (Perspective Camera)

相比之下，透视相机模拟了人类眼睛的工作方式，能够表现出近大远小的现象。初始化时需提供四个参数：

const camera = new THREE.PerspectiveCamera(
    fov,    // 垂直方向上的视野角度（Field of View）
    aspect, // 宽高比
    near,   // 近裁剪面
    far     // 远裁剪面
);

其中 `fov` 表示垂直方向上的视角范围，默认单位为度；而 `aspect` 则通常设置为渲染器宽度除以高度的比例 [^2]。

#### 设置相机位置与朝向

无论是哪种类型的相机，都可以通过调整其 `.position` 属性来改变所在的位置，并且可以调用`.lookAt()` 方法让相机看向特定的目标点：

camera.position.set(x, y, z);       // 设定相机坐标
camera.lookAt(new THREE.Vector3(0, 0, 0)); // 让相机指向原点

以上就是关于如何配置和使用 Three.js 的不同种类相机的基础介绍以及一些常用操作方法 [^4]。