likes
comments
collection
share

入门 -1 第一个场景&相机介绍

作者站长头像
站长
· 阅读数 74

第一个场景和模型

无论是创建一个完整的世界还是只是将一个模型放入网页中，都需要一个场景来包含这个世界或模型，一个相机来观察它，一盏灯来照亮它，当然，至少一个可视对象作为模型。

所有模型，无论是一个盒子还是一个复杂的角色，都是由三角形或多面体组成的网格。

入门 -1 第一个场景&相机介绍

所有使用 Babylon.js 引擎的项目都需要一个添加了相机和灯光的场景。然后我们可以创建我们的盒子

function firstScene(){
//创建一个场景
const scene=new BABYLON.Scene(engine)
//创建一个相机弧形旋转相机
const camera=new BABYLON.ArcRotateCamera("camera",-Math.PI/2,Math.PI/2.5,3,new BABYLON.Vector3(0,0,0),scene)
//控制相机
camera.attachControl(camera,true)
//创建一个灯光
const light=new BABYLON.HemisphericLight("light",new BABYLON.Vector3(0, 1, 0), scene)

//创建一个盒子
const  box =new BABYLON.CreateBox("box", {}, scene);

return scene
}

相机介绍：

在bayblon相机中，常用的目前是2个：通用相机UniversalCamera，模仿第一人称的移动视角；弧形旋转相机ArcRotateCamera，它是一种轨道相机，可以控制远近和角度。随着WebVR的来临，可能常用的相机会增加。

通用相机Universal Camera

通用相机可以根据输入设备响应键盘、鼠标、触摸和游戏手柄的控制操作，不需要再特别指定控制器。通用相机扩展并且替代了自由相机Free Camera、触摸相机Touch Camera和游戏手柄相机Gamepad Camera

通用相机的默认控制：

  • 键盘 - 左右方向键能够左右移动相机的视角，而上下方向键能够把相机拉近或推远。
  • 鼠标 - 按住鼠标左键或右键进行拖动，可以控制相机的视角。
  • 触摸屏 - 左右滑动可左右移动相机，上下滑动可拉近或推远；
  • 游戏手柄 - 和设备相关，常规手柄就是上下左右键控制。
// 参数顺序 : name相机名称, position相机放置的位置, scene场景实例
var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);

//相机观察的目标，在这里表示：相机放在(0,0,-10)，镜头对准观察 (0,0,0)
camera.setTarget(BABYLON.Vector3.Zero());

// 让相机响应用户操作
camera.attachControl(canvas, true);

弧形旋转相机Arc Rotate Camera

弧形旋转相机总是指向一个给定的目标位置，而且能够以此目标位置作为中心进行360°旋转。它的操作体验和观察角度比通过相机更灵活，同样能够响应鼠标、键盘、游戏手柄和触摸事件。

可将弧形旋转相机视为一个围绕其目标位置进行观察的摄像机，或者想象一下，它更像是一个环绕地球轨道运行的间谍卫星。相对于目标(地球)位置，相机自身的位置可以设置三个参数：即纵向旋转的alpha（弧度） ，横向旋转的beta（弧度） 和代表距目标位置距离的半径radius。

入门 -1 第一个场景&相机介绍

// 参数: alpha, beta, radius, 目标位置position, scene场景实例
    var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

// 设置后会覆盖alpha, beta, radius
    camera.setPosition(new BABYLON.Vector3(0, 0, 20));

// 让相机响应用户操作
    camera.attachControl(canvas, true);

可以使用 Ctrl + 鼠标左键 或 鼠标右键 让弧形旋转相机进行平移，也就是修改相机观察的目标位置，如果要禁用 Ctrl + 鼠标左键 平移，可以在attachControl中将useCtrlForPanning设置为false，代码如下：

camera.attachControl(canvas, noPreventDefault, useCtrlForPanning);

如果有需要，也可以完全取消平移操作：

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

跟随相机FollowCamera

跟随相机可以一直守望着ta。只要给它一个物体作为跟随目标，跟随相机能够从任何位置移动过来，一直紧盯目标物体，一旦物体移动了，跟随相机也会跟着移动。

创建跟随相机时需要设置它的初始位置，然后目标位置根据以下三个参数进行控制：

  • camera.radius - 相机距离目标的距离
  • camera.heightOffset - 相机朝目标上方的偏移
  • camera.rotationOffset - 相机与目标在水平面的角度偏移，默认相机和目标在同一水平面：rotationOffset增加则相机会朝着顺时针方向围绕物体水平转动。

通过设置camera.cameraAcceleration加速度和camera.maxCameraSpeed最大速度，可以控制相机移动到目标位置的动态效果。

构建跟随相机

// 参数: name相机名称, position相机位置, scene场景实例
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

// 相机距离目标的距离
camera.radius = 30;

// 相机朝目标上方的偏移
camera.heightOffset = 10;

// 相机与目标在水平面的角度偏移，默认相机和目标在同一水平面
camera.rotationOffset = 0;

// 相机靠近目标位置的加速度
camera.cameraAcceleration = 0.005

// 相机达到的最大速度
camera.maxCameraSpeed = 10

// 让相机响应用户操作
camera.attachControl(canvas, true);

// 注意：设置相机目标，注意BabylonJS V 2.5的变化
// targetMesh为目标物体
camera.target = targetMesh;   // babylon 2.4 版本以前
camera.lockedTarget = targetMesh; //babylon 2.5 版本以后

Playground 跟着目标物体移动的跟随相机示例

立体相机AnaglyphCameras

立体相机由通用相机和弧形旋转相机扩展而来，专门用来给3D眼镜(红色和青色镜片的那种眼镜)使用，它们用到了后期滤波器技术。

构建立体通用相机

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

构建立体弧形旋转相机

// 参数 : 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);

eyeSpace参数设置左眼视图和右眼视图之间的偏移量。 戴好3D眼镜后，可以尝试调整这个数值，取值为float。

可以通过访问Wikipedia全面了解立体技术。

设备方向相机Device Orientation Camera

这是专门设计用于对手持设备方向事件做出响应的相机，例如智能手机向前或向后，向左或向右倾斜，陀螺仪会改变方向，最后让屏幕显示横屏或者竖屏。

构建设备方向相机

// 参数 : name, position, 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;

// 让相机响应用户操作
camera.attachControl(canvas, true);

需要手机来看这个示例，把屏幕方向锁定设置关掉哦

虚拟摇杆相机

这是特别为手持设备设计的，可以有一个虚拟摇杆显示在屏幕上，就像在手机上吃鸡的虚拟方向操纵杆那样。虚拟操纵杆是显示屏幕上的二维图形，用于控制相机的观察角度以及其他情况。

完整示例

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

构建虚拟现实设备方向自由相机

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

构建虚拟现实设备方向弧形旋转相机

//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);

构建虚拟现实设备方向游戏手柄相机

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

WebVR自由相机

根据WebVR标准制作的虚拟现实相机，建议用这个替代之前用到的虚拟现实设备方向相机。创建方式如下：

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

这里只是简单介绍一下，其实WebVR非常重要，所以有自己的教程进行专门介绍。WebVR相机的使用

飞行相机FlyCamera

该相机模仿3D空间中的自由飞行，可以想象为“3D空间飞行的幽灵战机”，飞行相机有逐步校正侧倾的设置，以及模拟倾斜转弯的设置，可以用到第一人称飞行体验游戏中。

它响应以下操作：

  • 键盘 - A和D键可左右移动相机。 使用W和S键向前和向后移动。 E和Q键可上下移动。
  • 鼠标 - 以摄像机为原点，按照纵向和横向(X, Y)轴旋转摄像机。 按住鼠标右键，以摄像机为原点，使摄像机绕着Z轴旋转。

构建飞行相机

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

//像飞机一样盘旋，具有更快的侧倾校正和倾斜转弯。

//默认值为100。数字越大，校正速度越慢。
camera.rollCorrect = 10;

// 默认是 false.
camera.bankedTurn = true;

// 弧度默认为90°，倾斜多少度就让相机侧倾。
camera.bankedTurnLimit = Math.PI / 2;

//多少偏航（转弯）会影响滚动（倾斜转弯）。
//小于1会减少侧倾，大于1会增加侧倾。
camera.bankedTurnMultiplier = 1;

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

自定义输入

相机根据用户输入来交互的移动位置，如果满意Babylon.js提供的以上相机预设，那就愉快的使用下去，如果觉得不满意，请往下看。

如果你想基于现有的相机预设来增减用户输入行为，可以对现有相机进行自定义，或者全新定义一个相机的用户输入行为也是可以的。以上的相机都具备一个输入管理器，适应一些高级的应用场景。请阅读自定义相机输入来了解更多这方面的信息。

转载自:https://juejin.cn/post/7248168880573562940
评论
请登录