Babylon.js 第七节 相机+重力

一、常用相机

(1)万能相机

代码示例：

    let camera=new BABYLON.FreeCamera('camera',new BABYLON.Vector3(0,10,0),scene)
    //camera.beta=Math.PI/5
    //鼠标滚轮控制
    camera.inputs.addMouseWheel()
    //沿x轴滚动
    camera.inputs.attached["mousewheel"].wheelYMoveRelative = BABYLON.Coordinate.X;
    //沿y轴滚动
    camera.inputs.attached["mousewheel"].wheelYMoveRelative = BABYLON.Coordinate.Y;
    //沿z轴滚动
    camera.inputs.attached["mousewheel"].wheelYMoveRelative = BABYLON.Coordinate.Z;
    //反转鼠标滚轮
    camera.inputs.attached["mousewheel"].wheelPrecisionY = -1;
    //相机可控，默认不可控
    camera.attachControl(true)

（2）弧形旋转相机

var camera = new BABYLON.ArcRotateCamera("Camera", 0,0,10,
    new BABYLON.Vector3(0, 0, 0), scene);

（3）跟随相机

相机跟随目标：

    var camera = new BABYLON.FollowCamera("Camera",
        new BABYLON.Vector3(0, 5, 0), scene);
    //相机到目标的距离
    camera.radious=10
    //相机相对目标的高度偏移
    camera.heightOffset=10
    //相机在xy平面围绕目标旋转的旋转偏移
    camera.rotationOffset=0
    //相机从当前位置移动到目标位置的加速度
    camera.cameraAcceleration=0.005
    //相机的最大速度
    camera.maxCameraSpeed=10
    //把相机添加到画布
    camera.attachControl(canvas,true)
    //2.5以后的版本使用
    camera.lockedTarget=torus

（4） 立体通用相机

    var camera = new BABYLON.AnaglyphUniversalCamera("af_cam",
        new BABYLON.Vector3(0, 1, -15), 0.033, scene);
    camera.attachControl(true)
    camera.inputs.addMouseWheel()

（5）立体弧形旋转相机

var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam",
    -Math.PI / 2, Math.PI / 4, 20, BABYLON.Vector3.Zero(), 0.033, scene);

（6）设备方向相机

DeviceOrientationCamera专门设计用于对设备方向事件做出反应，例如现代移动设备向前、向后、向左或向右倾斜。

    var camera=new BABYLON.DeviceOrientationCamera('camera',
        new BABYLON.Vector3(0,10,0),scene)
    camera.angularSensibility=1000
    camera.moveSensibility=1000
    camera.attachControl(canvas,true)
    camera.inputs.addMouseWheel()

（7）VR设备方向相机

    var camera = new BABYLON.VRDeviceOrientationFreeCamera("Camera",
        new BABYLON.Vector3(-6.7, 1.2, -1.3), scene);

 (8)VR设备方向弧形旋转相机

    var camera = new BABYLON.VRDeviceOrientationArcRotateCamera("Camera",
        Math.PI / 2, Math.PI / 4, 25, new BABYLON.Vector3(0, 0, 0), scene);

（9）VR 设备方向游戏手柄相机

    var camera = new BABYLON.VRDeviceOrientationGamepadCamera("Camera",
        new BABYLON.Vector3(-10, 5, 14));

（10）飞行相机

    var camera=new BABYLON.FlyCamera('camera',
        new BABYLON.Vector3(0,5,-10),scene)
    //其类似飞机的旋转。具有更快的修正和倾斜玩转
    //默认为100，狮子越大，修正越慢
    camera.rollCorrect=10
    camera.bankedTurn=true
    //相机滚动的角度大小
    camera.bankedTurnLimit=Math.PI/5
    //小于1会减少滚动，大于1会增加滚动
    camera.backedTurnMultiplier=0.5

二、相机碰撞

（1）重力

在场景中应用重力：

scene.gravity=new BABYLON.Vector3(0,-0.9,0)

将场景的重力应用到相机

camera.applyGravity=true

Babylon.js 遵循一个更简单的引力模型——scene.gravity代表一个恒定的速度，而不是加速度，它以单位/帧而不是米/秒来衡量。

接下来定义椭球，也就是碰撞的表面。

camera.ellipsoid=new BABYLON.Vector3(1,1,1)

最后启用场景碰撞和碰撞检查：

    scene.collisionsEnabled=true
    camera.checkCollisions=true

（2）网格碰撞

网格碰撞需要先为网格定义一个ellipsoid属性，随后为这个网格添加方法moveWithCollisions（position）方法，称为移动碰撞，其中的position是一个Vector3矢量，就是方向向量，如果其移动距离太大，可以使用position.scale(0.5)，当网格沿着这个方向移动，遇到设置了碰撞检查的网格时就会停下。例如：

    let sphere=BABYLON.Mesh.CreateSphere('sphere',1,5,scene)
    sphere.position=new BABYLON.Vector3(0,2.5,0)
    sphere.ellipsoid=new BABYLON.Vector3(4,4,4)
    sphere.checkCollisions=true
    sphere.applyGravity=true

    let box=BABYLON.MeshBuilder.CreateBox('box',{width:5,height:3,depth:4},scene)
    box.position=new BABYLON.Vector3(40,5,0)
    box.checkCollisions=true

    scene.registerBeforeRender(function(){
        //移动与碰撞
        sphere.moveWithCollisions(new BABYLON.Vector3(1,0,0).scale(0.05))
    })

这样的好处就是网格会立即停下。