babylon101

相机


相机

在Babylon.js中可用的许多相机中,最常用的两个可能是 - 用于第一人称运动的通用相机和用于轨道相机的弧形旋转相机。虽然随着WebVR的出现,这可能会改变。

对于用户的输入控制,一旦构造使用,所有相机都需要附加到画布上

camera.attachControl(canvas, true);

第二个参数是可选的,默认为false。如果为false,则会阻止对canvas事件的默认操作。设置为true以允许画布默认操作。

笔记

  1. 游戏手柄可以用作控制器。
  2. 对于触摸控制任一PEP或hand.js是必要的。

通用相机

这是在Babylon.js的2.3版本中引入的,并且由键盘,鼠标,触摸或 游戏手柄控制, 具体取决于所使用的输入设备,无需指定控制器。这扩展并取代了仍然可用的 触摸相机 和游戏手柄相机。

如果没有指定任何内容,Universal Camera现在是Babylon.js使用的默认相机,如果您想在场景中使用类似FPS的控件,它是您的最佳选择。babylonjs.com上的所有演示均基于该功能。将Xbox控制器插入您的PC并使用它,您仍然可以浏览大多数演示。

默认操作是:

  1. 键盘 - 左右箭头左右移动相机,上下箭头向前和向后移动;

  2. 鼠标 - 以相机为原点围绕轴旋转相机;

  3. 触摸 - 向左和向右滑动可左右移动相机,然后向上和向下滑动以向前和向后移动相机;

  4. gamepad 对应设备。

注意

  • 使用Playground中的键需要您在渲染区域内单击以使其获得焦点。

构建通用相机


// Parameters : name, position, scene
    var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);

// Targets the camera to a particular position. In this case the scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

// Attach the camera to the canvas
    camera.attachControl(canvas, true);

通用相机的游乐场示例


弧形旋转相机

此摄像机始终指向给定的目标位置,并且可以围绕该目标旋转,目标作为旋转中心。它可以用光标和鼠标控制,也可以用触摸事件控制。

可以把这台相机想象成一个绕其目标位置轨道运行的轨道,或者更具想象力地将其作为绕地球轨道运行的间谍卫星。它相对于目标(地球)的位置可以通过三个参数设置,α(弧度)表示纵向旋转,β(弧度)表示纬度旋转, 半径表示距目标位置的距离。这是一个例子:

arc rotate camera

由于技术原因,将beta设置为0或PI可能会导致问题,在这种情况下,beta会偏移0.1弧度(约0.6度)。

α和β均以顺时针方向增加。

摄像机的位置也可以通过矢量设置,该矢量将覆盖alpha,beta和radius的任何当前值。这比计算所需角度容易得多

无论是使用键盘,鼠标还是触摸滑动左右方向都会改变alpha和向上方向改变beta

构造弧形旋转相机


// Parameters: alpha, beta, radius, target position, scene
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

// Positions the camera overwriting alpha, beta, radius
    camera.setPosition(new BABYLON.Vector3(0, 0, 20));

// This attaches the camera to the canvas
    camera.attachControl(canvas, true);

弧形旋转相机的游乐场示例 -


使用CTRL + MouseLeftClick(默认操作)也可以使用ArcRotateCamera进行平移。您可以指定要使用MouseRightClick相反,通过设置useCtrlForPanning在假attachControl电话:

   camera.attachControl(canvas, noPreventDefault, useCtrlForPanning);

如果需要,您还可以通过设置完全停用平移:

   scene.activeCamera.panningSensibility = 0;

FollowCamera

跟随相机完成它在锡上的说法。给它一个网格作为目标,从它当前所处的任何位置移动到目标位置,从中查看目标。当目标移动时,Follow Follow。

跟随摄像机的初始位置在创建时设置,然后目标位置设置为三个参数:

  1. 与目标的距离 - camera.radius;

  2. 目标上方的高度 - camera.heightOffset;

  3. xy平面中目标周围的角度。

摄像机移动到目标位置的速度通过其加速度(camera.cameraAcceleration)设置为最大速度(camera.maxCameraSpeed)。

构建跟随相机


// Parameters: name, position, scene
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

// The goal distance of camera from target
camera.radius = 30;

// The goal height of camera above local origin (centre) of target
camera.heightOffset = 10;

// The goal rotation of camera around local origin (centre) of target in x y plane
camera.rotationOffset = 0;

// Acceleration of camera in moving from current to goal position
camera.cameraAcceleration = 0.005

// The speed at which acceleration is halted
camera.maxCameraSpeed = 10

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// NOTE:: SET CAMERA TARGET AFTER THE TARGET'S CREATION AND NOTE CHANGE FROM BABYLONJS V 2.5
// targetMesh created here.
camera.target = targetMesh;   // version 2.4 and earlier
camera.lockedTarget = targetMesh; //version 2.5 onwards

移动目标后跟随摄像机的游乐场示例 -


AnaglyphCameras

这些扩展了通用和弧形旋转相机的使用,用于红色和青色3D眼镜。他们使用后处理过滤技术。

构建浮雕通用相机


// Parameters : name, position, eyeSpace, scene
var camera = new BABYLON.AnaglyphUniversalCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

构造浮雕ArcRotateCamera


// Parameters : name, alpha, beta, radius, target, eyeSpace, scene
var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);

的眼位参数设置左眼视图和右眼视图之间的偏移的量。戴上3D眼镜后,您可能需要尝试使用此浮动值。

您可以访问 维基百科页面,了解所有关于立体照片的内容.

设备方向摄像头

这是专门设计用于对设备定向事件做出反应的相机,例如向前或向后和向左或向右倾斜的现代移动设备。

构建设备方向摄像头


// Parameters : name, position, scene
   var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 0, 0), scene);

    // Targets the camera to a particular position
    camera.setTarget(new BABYLON.Vector3(0, 0, -10));

    // Sets the sensitivity of the camera to movement and rotation
    camera.angularSensibility = 10;
    camera.moveSensibility = 10;

    // Attach the camera to the canvas
    camera.attachControl(canvas, true);

设备方向摄像机的游乐场示例 -


对于那些有正确设备的人。

虚拟操纵杆相机

这专门用于对Virtual Joystick事件做出反应。虚拟操纵杆是屏幕上的2D图形,用于控制摄像机或其他场景项目。

需要

hand.js.

虚拟操纵杆David Rousset 在David的博客上发表博客。

视频

视频中的虚拟操纵杆相机演示

Screenshot of the Virtual Joysticks Camera in action on Espilit

完整样本

这是一个完整的示例,可以加载Espilit演示并将默认摄像头切换到虚拟操纵杆摄像头:

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.
    }),
  }
}

如果切换回另一台摄像机,请不要忘记先调用dispose()函数。实际上,VirtualJoysticks正在3D WebGL画布上创建一个2D画布,用于绘制带有青色和黄色圆圈的操纵杆。如果您忘记调用dispose()函数,2D画布将保留,并将继续使用触摸事件输入。

VR设备定位相机

全新系列相机。 VR设备方向摄像机的游乐场示例 - -


对于那些有正确设备的人。

构建VR设备定位自由摄像机

//Parameters: name, position, scene, compensateDistortion, vrCameraMetrics
var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene);

构建VR设备方向弧旋转相机

//Parameters: name, alpha, beta, radius, target, scene, compensateDistortion, vrCameraMetrics
var camera = new BABYLON.VRDeviceOrientationArcRotateCamera ("Camera", Math.PI/2, Math.PI/4, 25, new BABYLON.Vector3 (0, 0, 0), scene);

构建VR设备定位游戏手柄相机

//Parameters: name, position, scene, compensateDistortion, vrCameraMetrics
var camera = new BABYLON.VRDeviceOrientationGamepadCamera("Camera", new BABYLON.Vector3 (-10, 5, 14));

WebVR免费相机

新的虚拟现实相机


// Parameters : name, position, scene, webVROptions
    var camera = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 1, -15), scene);

这台相机本身就值得一页,所以这就是使用WebVR相机 ;

FlyCamera

这款相机模仿3D空间的自由运动,想到“空间中的幽灵”。它附带一个逐渐修正Roll的选项,也可以选择模拟转弯。

它的默认值是:

  1. 键盘 - A和D键左右移动相机。该W¯¯和小号键向前和向后移动。该Ë和Q键移动上下。

  2. 鼠标 - 以相机为原点,围绕俯仰和偏转(X,Y)轴旋转摄像机。按住鼠标右键可以将相机作为原点旋转,使相机围绕Roll(Z)轴旋转。

构建一个飞行相机


// Parameters: name, position, scene
var camera = new BABYLON.FlyCamera("FlyCamera", new BABYLON.Vector3(0, 5, -10), scene);

// Airplane like rotation, with faster roll correction and banked-turns.
// Default is 100. A higher number means slower correction.
camera.rollCorrect = 10;
// Default is false.
camera.bankedTurn = true;
// Defaults to 90° in radians in how far banking will roll the camera.
camera.bankedTurnLimit = Math.PI / 2;
// How much of the Yawing (turning) will affect the Rolling (banked-turn.)
// Less than 1 will reduce the Rolling, and more than 1 will increase it.
camera.bankedTurnMultiplier = 1;

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

自定义输入

相机依靠用户输入来移动相机。如果您对Babylon.js给您的相机预设感到满意,请坚持下去。

如果要根据用户首选项更改用户输入,请自定义一个现有预设,或使用您自己的输入机制。这些摄像机具有专为这些高级场景设计的输入管理器。阅读 自定义相机输入解有关调整相机输入的更多信息。

下一步

您现在已经学会了如何使用许多相机,并在我们最常用的两个相机上学习了一些高级输入选项。您可以控制观看场景的方式,可以选择输入和查看设备,现在您可以知道如何移动相机。为了让您的场景更逼真,我们现在将学习 如何管理灯光再见。

进一步阅读

相机概述