相机

通用相机

作为默认相机添加到场景中, 模拟第一人称视角

构建:

// 参数顺序 : name相机名称, position相机位置, scene场景实例
var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);
//相机观察的目标，镜头对准观察 (0,0,0)
camera.setTarget(BABYLON.Vector3.Zero());
// 让相机响应用户操作
camera.attachControl(canvas, true);

弧形旋转相机

围绕一个目标位置进行观察的相机, 类似于环绕地球轨道运行的卫星

var camera = new BABYLON.ArcRotateCamera(
  "Camera", // 相机名称
  Math.PI / 3, // 纵向旋转弧度
  Math.PI / 3, // 横向旋转弧度
  10, // 距离目标半径
  new BABYLON.Vector3(0, 0, 0), // 相机位置
  scene
);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);

• 可以使用 Ctrl + 鼠标左键 或 鼠标右键平移修改相机位置
• 如需禁用 Ctrl + 鼠标左键,可以在attachControl中将useCtrlForPanning设置为false

// 参数顺序: noPreventDefault, useCtrlForPanning
camera.attachControl(canvas, true, false);

• 完全取消平移操作

//这个值用来控制平移的灵敏度，为0就是完全不响应平移
scene.activeCamera.panningSensibility = 0;

跟随相机

以一个模型作为观察目标, 相机位置跟随模型移动, 一直紧盯目标物体

// 参数: name; 相机位置; 场景Scene
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);
camera.radius = 30; // 相机距离目标的距离
camera.heightOffset = 10; // 相机超过目标局部坐标中心点的高度
// 相机在目标局部坐标XY平面内环绕目标的旋转角度，默认相机和目标在同一水平面
camera.rotationOffset = 0;
camera.cameraAcceleration = 0.005; // 相机靠近目标位置的加速度
camera.maxCameraSpeed = 10; // 相机达到的最大速度
camera.attachControl(canvas, true);
camera.lockedTarget = myBox; // 观察目标

立体相机

给 3D 眼镜(红色和青色镜片)使用, 电影院经常见到; 有通用和弧形旋转相机两种

立体通用相机

var camera = new BABYLON.AnaglyphUniversalCamera(
  "af_cam", // 名称
  new BABYLON.Vector3(0, 1, -15), // 位置
  0.033, // 左右眼视图(红绿)偏移量
  scene
);

立体弧形旋转相机

参数和弧形旋转相机基本一致

var camera = new BABYLON.AnaglyphArcRotateCamera(
  "aar_cam",
  -Math.PI / 2, // 纵向旋转弧度
  Math.PI / 4, // 横向旋转弧度
  20, // 距离目标半径
  new BABYLON.Vector3.Zero(), // 焦点位置
  0.033,
  scene
);

陀螺仪相机

这个相机会对于设备陀螺仪做出反应

//配置项：相机名称，相机位置，场景对象
var camera = new BABYLON.DeviceOrientationCamera(
  "DevOr_camera",
  new BABYLON.Vector3(0, 0, 0),
  scene
);

// 设置相机朝向一个特定的位置
camera.setTarget(new BABYLON.Vector3(0, 0, -10));

// 设置相机对移动和旋转的灵敏度
camera.angularSensibility = 10;
camera.moveSensibility = 10;

// 将相机事件绑定到canvas上面
camera.attachControl(canvas, true);

虚拟操纵杆相机

虚拟操纵杆相机会在界面上生成虚拟的操作图形，用于控制相机或其他场景的物体。 由于为触摸屏设备设计，所以需要依赖第三方插件hand.js

完整示例：

document.addEventListener("DOMContentLoaded", startGame, false);
function startGame() {
  if (BABYLON.Engine.isSupported()) {
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);

    BABYLON.SceneLoader.Load("Espilit/", "Espilit.babylon", engine, function (newScene) {

      var VJC = new BABYLON.VirtualJoysticksCamera("VJC", newScene.activeCamera.position, newScene);
      VJC.rotation = newScene.activeCamera.rotation;
      VJC.checkCollisions = newScene.activeCamera.checkCollisions;
      VJC.applyGravity = newScene.activeCamera.applyGravity;

      // Wait for textures and shaders to be ready
      newScene.executeWhenReady(function () {
        newScene.activeCamera = VJC;
        // Attach camera to canvas inputs
        newScene.activeCamera.attachControl(canvas);
        // Once the scene is loaded, just register a render loop to render it
        engine.runRenderLoop(function () {
          newScene.render();
        }),
      }),
    }, function (progress) {
    // To do: give progress feedback to user.
    }),
  }
}

VR 陀螺仪相机

对于拥有 VR 头显设备的开发者

VR 陀螺仪自由相机

// 配置项：相机名称，相机位置，场景对象，补偿失真，vrCameraMetrics
var camera = new BABYLON.VRDeviceOrientationFreeCamera(
  "Camera",
  new BABYLON.Vector3(-6.7, 1.2, -1.3),
  scene
);

VR 陀螺仪弧形旋转相机

//配置项: 相机名称，经度，纬度，距离，目标位置，场景对象, 补偿失真, vrCameraMetrics
var camera = new BABYLON.VRDeviceOrientationArcRotateCamera(
  "Camera",
  Math.PI / 2,
  Math.PI / 4,
  25,
  new BABYLON.Vector3(0, 0, 0),
  scene
);

VR 陀螺仪游戏手柄相机

//配置项: 相机名称, 相机位置, 场景对象, 补偿失真, vrCameraMetrics
var camera = new BABYLON.VRDeviceOrientationGamepadCamera(
  "Camera",
  new BABYLON.Vector3(-10, 5, 14)
);