Babylon.js学习之路《四、Babylon.js 中的相机（Camera）与视角控制》

1. 引言：为什么相机是 3D 场景的“眼睛”？

• 上一章简单介绍了场景中如何添加标准形状的物体，并且介绍了如何调整物体属性，包括位置、旋转、缩放，以及父级关系的设置。
• 这一章详细介绍一下Babylon中，相机相关的知识。涵盖相机类型、交互配置及实战技巧。

1.1 相机的核心作用

• 定义用户视角：观察场景的位置、方向、视野范围。
• 交互基础：通过鼠标/键盘/触控控制视角移动。

1.2 常见相机类型概览

• 自由相机（FreeCamera）
• 弧形旋转相机（ArcRotateCamera）
• 跟随相机（FollowCamera）
• 第一人称相机（UniversalCamera）

2. 相机基础参数解析

2.1 通用属性

• 位置（Position）：camera.position = new BABYLON.Vector3(x, y, z)。
• 目标（Target）：camera.setTarget(new BABYLON.Vector3(x, y, z))。
• 视野（FOV）：camera.fov = 0.8（弧度制，影响广角效果）。
• 近裁面与远裁面（Clipping Planes）：

    camera.minZ = 0.1; // 近裁面（避免渲染过近物体）
    camera.maxZ = 1000; // 远裁面（避免渲染过远物体）

2.2 相机坐标系

• 局部坐标系：相机的移动方向基于自身朝向。
• 世界坐标系：相机的移动方向基于全局坐标轴。

3. 详解常用相机类型

3.1 自由相机（FreeCamera）

• 特点：类似第一人称射击游戏的自由移动视角。
• 代码创建：

  const camera = new BABYLON.FreeCamera(
    "freeCamera", 
    new BABYLON.Vector3(0, 5, -10), 
    scene
  );
  camera.setTarget(BABYLON.Vector3.Zero());

• 控制配置：
  • 键盘移动：默认 WASD 控制前后左右，QE 控制升降。
  • 鼠标控制视角：camera.attachControl(canvas, true)。
  • 灵敏度调整：

    camera.speed = 0.5; // 移动速度
    camera.angularSensibility = 2000; // 鼠标灵敏度（值越大越迟钝）

3.2 弧形旋转相机（ArcRotateCamera）

• 特点：围绕目标点旋转、缩放，适合展示物体。
• 代码创建：

  const camera = new BABYLON.ArcRotateCamera(
    "arcCam", 
    alpha, beta, radius, // 初始角度（弧度）、半径
    target, // 目标点（Vector3）
    scene
  );
  camera.attachControl(canvas, true);

• 关键参数：
  • 限制旋转角度：camera.lowerBetaLimit = 0.1; camera.upperBetaLimit = Math.PI/2。
  • 限制缩放范围：camera.lowerRadiusLimit = 5; camera.upRadiusLimit = 20。
• 交互优化：
  • 启用惯性效果：camera.inertia = 0.9（拖拽后平滑停止）。

3.3 跟随相机（FollowCamera）

• 特点：跟随某个物体移动，适合角色扮演游戏。
• 代码创建：

  const camera = new BABYLON.FollowCamera(
    "followCam", 
    new BABYLON.Vector3(0, 5, -10), // 初始位置
    scene
  );
  camera.radius = 10; // 跟随距离
  camera.heightOffset = 2; // 垂直偏移
  camera.lockedTarget = playerMesh; // 绑定目标物体

3.4 其他相机类型（快速概览）

• 第一人称相机（UniversalCamera）：针对移动端优化的自由相机。
• VR 设备相机（WebXRCamera）：通过 WebXR 支持 VR 头显。

4. 视角交互实战技巧

4.1 多相机切换

• 代码示例：

  const camera1 = new BABYLON.FreeCamera(...);
  const camera2 = new BABYLON.ArcRotateCamera(...);
  scene.activeCamera = camera1; // 切换活动相机

4.2 自定义输入控制

• 覆盖默认按键事件：

  camera.keysUp = [87];    // W 键前进
  camera.keysDown = [83];  // S 键后退
  camera.keysLeft = [65];  // A 键左移
  camera.keysRight = [68]; // D 键右移

• 添加鼠标滚轮缩放（适用于 ArcRotateCamera）：

  camera.wheelPrecision = 50; // 滚轮灵敏度

4.3 相机动画与过渡

• 平滑移动相机到新位置：

  BABYLON.Animation.CreateAndStartAnimation(
    "camMove", camera, "position",
    30, 120, // 帧率、总帧数
    camera.position, // 起始位置
    new BABYLON.Vector3(10, 5, 0), // 目标位置
    BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
  );

5. 相机性能优化与调试

5.1 视锥剔除（Frustum Culling）

• 原理：只渲染相机视野内的物体。
• Babylon.js 默认启用，可通过 mesh.isVisible = false 手动控制。

5.2 避免过度绘制

• 调整 maxZ 值，减少远处物体渲染。

5.3 使用调试工具

• 显示相机视锥：

  camera.showFrustum = true; // 显示视锥线框

• 实时调试参数：通过 scene.debugLayer 调整相机属性。

6. 实战任务

任务 1：构建可切换的相机系统

• 场景中放置两个相机：自由相机（默认）和弧形旋转相机。
• 按空格键切换相机，并添加过渡动画。

任务 2：实现“物体聚焦”功能

• 点击场景中的物体，弧形旋转相机自动对准该物体并调整距离。

  mesh.actionManager = new BABYLON.ActionManager(scene);
  mesh.actionManager.registerAction(
    new BABYLON.ExecuteCodeAction(
      BABYLON.ActionManager.OnPickTrigger,
      () => {
        arcCamera.setTarget(mesh.position);
        arcCamera.radius = mesh.getBoundingInfo().diagonalLength * 2;
      }
    )
  );

7. 常见问题解答

• Q1：相机看不到物体？
  • 检查相机位置与目标点是否在物体附近。
  • 确认物体的位置未被其他物体遮挡。
• Q2：移动端触控不灵敏？
  • 调整 angularSensibility 和 wheelPrecision。
  • 使用 UniversalCamera 替代 FreeCamera。

8. 总结与下一章预告

8.1 关键知识点回顾

• 自由相机、弧形旋转相机的适用场景与控制优化。
• 多相机切换与自定义交互逻辑。

8.2 下一章预告

• 《灯光与阴影：让场景栩栩如生的关键》：学习点光源、方向光与阴影渲染技术。