Babylon.js-7 照相机

参考链接：https://doc.babylonjs.com/babylon101/cameras

一个3d场景需要至少一个照相机才能够渲染出来呈现给我们，所以照相机是3d场景中很重要的组成部分。

我们定义一个照相机，它的伪代码应该如下：

1
const camera = new BABYLON.<kind>Camera("name",...,scene)

其中<kind>表示相机种类，...是每个相机的参数都不太一样，用这个来表示一下。name是照相机的名称，scene是对应场景。

通用相机 （Universal Camera）

通用相机是在2.3版Babylon.js中推出的（当前版本是4），由键盘，鼠标，触摸或游戏手柄控制，具体取决于所使用的输入设备，无需指定控制器。它替代了自由相机（Free Camera）、触摸相机（Touch Camera）和游戏手柄相机（Gamepad Camera），当然这些都仍然可用。

如果你玩过CS:GO这款游戏的话，当玩家阵亡时，切换到自由视角，使用的就是通用相机（类似的，因为不是Babylon引擎）。

PS：当然如果你玩过的话，你应该知道WDNMD是什么意思。 233

使用以下方法创建通用相机：

1
const camera = new BABYLON.UniversalCamera("camera",position,scene);

其中position表示相机的位置，我们还可以通过camera.setPosition(newPosition)方法重新定义相机位置，也可以使用camera.setTarget(targetPosition)方法设置观察位置。

使用Babylon提供的代码演示一下，你可以使用鼠标点击左键拖动，或者触摸移动视角，使用方向键进行前后左右移动，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var createSceneUniversalCamera = function (engine,canvas) {
        // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    /********** UNIVERSAL CAMERA EXAMPLE **************************/

    // This creates and positions a universal camera (non-mesh)
    var camera = new BABYLON.UniversalCamera("camera", new BABYLON.Vector3(0, 0, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

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

    /**************************************************************/

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    
    //Materials
    var redMat = new BABYLON.StandardMaterial("red", scene);
    redMat.diffuseColor = new BABYLON.Color3(1, 0, 0);
    redMat.emissiveColor = new BABYLON.Color3(1, 0, 0);
    redMat.specularColor = new BABYLON.Color3(1, 0, 0);
    
    var greenMat = new BABYLON.StandardMaterial("green", scene);
    greenMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
    greenMat.emissiveColor = new BABYLON.Color3(0, 1, 0);
    greenMat.specularColor = new BABYLON.Color3(0, 1, 0);
    
    var blueMat = new BABYLON.StandardMaterial("blue", scene);
    blueMat.diffuseColor = new BABYLON.Color3(0, 0, 1);
    blueMat.emissiveColor = new BABYLON.Color3(0, 0, 1);
    blueMat.specularColor = new BABYLON.Color3(0, 0, 1);
    
    // Shapes
    var plane1 = new BABYLON.Mesh.CreatePlane("plane1", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    plane1.position.x = -3;
    plane1.position.z = 0;
    plane1.material = redMat;
    
    var plane2 = new BABYLON.Mesh.CreatePlane("plane2", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    plane2.position.x = 3;
    plane2.position.z = -1.5;
    plane2.material = greenMat;
    
    var plane3 = new BABYLON.Mesh.CreatePlane("plane3", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    plane3.position.x = 3;
    plane3.position.z = 1.5;
    plane3.material = blueMat;
    
    var ground = BABYLON.Mesh.CreateGround("ground1", 10, 10, 2, scene);
    
    return scene;
}
const canvasUniversalCamera = document.getElementById('renderCanvas-7-universalcamera')
const engineUniversalCamera = new BABYLON.Engine(canvasUniversalCamera,true)
const sceneUniversalCamera = createSceneUniversalCamera(engineUniversalCamera,canvasUniversalCamera) 
engineUniversalCamera.runRenderLoop(function(){sceneUniversalCamera.render()})

效果如下：

有一点不同的是，对于相机控制，修改过的代码使用canvas.attachControl(canvas,false)。第二个参数是noPreventDefault，指不阻止默认事件，我们将其设置为false，即阻止默认事件。这样使用鼠标滚轮，或者触摸下滑时，就不会向下滚动，只会移动照相机。

但是，通用相机没有滚轮功能，所以在它上面还是会滚动页面😀。你可以在下面弧形旋转相机的地方试试。

弧形旋转相机 （Arc Rotate Camera）

弧形旋转相机是一个观察相机，它会在两条轴上旋转，我们可以通过鼠标左键拖动或者触摸移动将相机旋转。两个轴的旋转角度分别为alpha和beta（弧度），radius表示相机到达物体的距离。下面给出Babylon.js提供的示意图：

我们观察到alpha轴和beta轴的变化范围是不同的。alpha的变化范围是[0,2π]，beta的变化范围是[0,π]，这是因为弧形旋转相机可以绕着alpha的轴进行旋转，我们可以想象有一个人，围着一个另一个人观察他的头部，它可以绕着这个人水平360°旋转，这是没问题的。而beta轴相当于俯视这个人或者平视，仰视这个人的头部，假设在仰视，如果幅度再大的话，他的脖子就断了。所以beta的变化范围是不是[0,2π]，而是[0,π]。

上面这张图没有标注xyz轴，实际上当alpha，beta为0的时候，轴方向是下图所示的：

你没有看到y轴，因为它正 指向你自己 。

这个相机类似于CS：GO中玩家阵亡时的观察视角（不是第一人称视角）。顺便说一下，第一人称视角和自由视角都是使用通用相机，只是你在阵亡状态下不能控制第一人称视角的相机位置而已。

使用以下方法创建弧形旋转相机：

1
const camera = new BABYLON.UniversalCamera("camera",alpha,beta,radius,position,scene);

其中alpha表示alpha角（弧度），beta表示beta角（弧度），radius表示相机位置到观察位置的距离（半径），position表示相机的位置，同样的，我们还可以通过camera.setPosition(newPosition)方法重新定义相机位置，也可以使用camera.setTarget(targetPosition)方法设置观察位置。在弧形旋转相机中，这样会覆盖构造函数中alpha，beta，radius参数。

我们还是使用Babylon.js的代码来演示弧形旋转相机，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var createSceneArcRotateCamera = function (engine,canvas) {
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    /********** ARC ROTATE CAMERA EXAMPLE **************************/

    // Creates, angles, distances and targets the camera
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

    // This positions the camera
    camera.setPosition(new BABYLON.Vector3(0, 0, -10));

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

    /**************************************************************/

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    
    //Materials
    var redMat = new BABYLON.StandardMaterial("red", scene);
    redMat.diffuseColor = new BABYLON.Color3(1, 0, 0);
    redMat.emissiveColor = new BABYLON.Color3(1, 0, 0);
    redMat.specularColor = new BABYLON.Color3(1, 0, 0);
    
    var greenMat = new BABYLON.StandardMaterial("green", scene);
    greenMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
    greenMat.emissiveColor = new BABYLON.Color3(0, 1, 0);
    greenMat.specularColor = new BABYLON.Color3(0, 1, 0);
    
    var blueMat = new BABYLON.StandardMaterial("blue", scene);
    blueMat.diffuseColor = new BABYLON.Color3(0, 0, 1);
    blueMat.emissiveColor = new BABYLON.Color3(0, 0, 1);
    blueMat.specularColor = new BABYLON.Color3(0, 0, 1);
    
    // Shapes
    var plane1 = new BABYLON.Mesh.CreatePlane("plane1", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    plane1.position.x = -3;
    plane1.position.z = 0;
    plane1.material = redMat;
    
    var plane2 = new BABYLON.Mesh.CreatePlane("plane2", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    plane2.position.x = 3;
    plane2.position.z = -1.5;
    plane2.material = greenMat;
    
    var plane3 = new BABYLON.Mesh.CreatePlane("plane3", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    plane3.position.x = 3;
    plane3.position.z = 1.5;
    plane3.material = blueMat;
    
    var ground = BABYLON.Mesh.CreateGround("ground1", 10, 10, 2, scene);
    
    return scene;
}
const canvasArcRotateCamera = document.getElementById('renderCanvas-7-arcrotatecamera')
const engineArcRotateCamera = new BABYLON.Engine(canvasArcRotateCamera,true)
const sceneArcRotateCamera = createSceneArcRotateCamera(engineArcRotateCamera,canvasArcRotateCamera) 
engineArcRotateCamera.runRenderLoop(function(){sceneArcRotateCamera.render()})

效果如下：

跟随相机 （Follow Camera）

跟随相机是一个“不自由”的相机，因为它要追随观察物体的移动来进行其自身位置的更新。

使用以下方法创建跟随相机：

1
const camera = new BABYLON.FollowCamera("camera",position,scene,lockedTarget);

其中position表示相机的初始位置，lockedTarget（Nullable，可选）表示相机跟随的物体，由于跟随相机的部分位置信息不受我们控制，我们可以通过设置如下参数来改变跟随相机的姿态：

  • camera.radius number 相机到观察物体的目标距离 目标距离指的是当跟随相机趋于稳定时相机到达观察物体的距离

  • camera.heightOffset number 相机到观察物体中心的目标高度

  • camera.rotationOffset number 相机到物体的xy平面的目标旋转角度

  • camera.cameraAcceleration number 相机从当前位置移动到目标位置的加速度

  • camera.maxCameraSpeed number 相机的最大速度

  • camera.lockedTarget Mesh 相机的跟随目标 （2.5版本及其之后版本）

  • camrea.target Mesh 相机的跟随目标 （2.4版本及其之前版本）

我们使用Babylon提供的代码，创建一个场景，场景中有400个大小相同的立方体，还有一个立方体上面有材质贴图。这个带有贴图的立方体在不断移动,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 var createSceneFollowCamera = function (engine,canvas) {
     // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    /********** FOLLOW CAMERA EXAMPLE **************************/

    // This creates and initially positions a follow camera 	
    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
    
    //camera.target is set after the target's creation
    
    // This attaches the camera to the canvas
    camera.attachControl(canvas, false);
    
    /**************************************************************/

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    
    //Material
    var mat = new BABYLON.StandardMaterial("mat1", scene);
    mat.alpha = 1.0;
    mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
    var texture = new BABYLON.Texture("http://jerome.bousquie.fr/BJS/images/spriteAtlas.png", scene);
    mat.diffuseTexture = texture;
    
    //Different face for each side of box to show camera rotation
    var hSpriteNb =  6;  // 6 sprites per row
    var vSpriteNb =  4;  // 4 sprite rows	
    
    var faceUV = new Array(6);

    for (var i = 0; i < 6; i++) {
        faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, 0, (i+1)/hSpriteNb, 1 / vSpriteNb);
    }
    
    // Shape to follow
    var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2, faceUV: faceUV }, scene);
    box.position = new BABYLON.Vector3(20, 0, 10);
    box.material = mat;

    //create solid particle system of stationery grey boxes to show movement of box and camera
    var boxesSPS = new BABYLON.SolidParticleSystem("boxes", scene, {updatable: false});
    
    //function to position of grey boxes
    var set_boxes = function(particle, i, s) {
        particle.position = new BABYLON.Vector3(-50 + Math.random()*100, -50 + Math.random()*100, -50 + Math.random()*100); 
    }
    
    //add 400 boxes
    boxesSPS.addShape(box, 400, {positionFunction:set_boxes});  
    var boxes = boxesSPS.buildMesh(); // mesh of boxes

    /*****************SET TARGET FOR CAMERA************************/ 
    camera.lockedTarget = box;
    /**************************************************************/
    
    var linex =new BABYLON.Mesh.CreateLines('linex',[new BABYLON.Vector3(-10000,0,0),new BABYLON.Vector3(10000,0,0)],scene);
    var liney =new BABYLON.Mesh.CreateLines('liney',[new BABYLON.Vector3(0,-10000,0),new BABYLON.Vector3(0,10000,0)],scene);
    var linez =new BABYLON.Mesh.CreateLines('linez',[new BABYLON.Vector3(0,0,-10000),new BABYLON.Vector3(0,0,10000)],scene);
    
    linex.color=new BABYLON.Color3(1,0,0);
    liney.color=new BABYLON.Color3(0,1,0);
    linez.color=new BABYLON.Color3(0,0,1);
    
    //box movement variables
    var alpha = 0;
    var orbit_radius = 20
    
    
    //Move the box to see that the camera follows it 	
    scene.registerBeforeRender(function () {
    alpha +=0.01;
    box.position.x = orbit_radius*Math.cos(alpha);
    box.position.y = orbit_radius*Math.sin(alpha);
    box.position.z = 10*Math.sin(2*alpha);
    
    //change the viewing angle of the camera as it follows the box
    camera.rotationOffset = (18*alpha/360);
    });
    
    return scene;
}
const canvasFollowCamera = document.getElementById('renderCanvas-7-followcamera')
const engineFollowCamera = new BABYLON.Engine(canvasFollowCamera,true)
const sceneFollowCamera = createSceneFollowCamera(engineFollowCamera,canvasFollowCamera) 
engineFollowCamera.runRenderLoop(function(){sceneFollowCamera.render()})

效果如下：

立体浮雕相机们 (AnaglyphCameras)

这些相机是通用相机和弧形旋转相机的拓展，它通过后处理过滤技术生成可以使用红蓝3d眼睛观察的渲染效果。

我们可以通过如下代码生成立体浮雕相机

1
2
var camera1 = new BABYLON.AnaglyphUniversalCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);
var camera2 = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);

与普通的通用相机和弧形旋转相机的区别在于它多了一个参数eyeSpace，在上例中是0.033，意思是左眼视窗与右眼视窗的偏移量。我们直接修改上面的弧形旋转相机为立体浮雕弧形旋转相机，进行观察，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var createSceneAnaglyphArcRotateCamera = function (engine,canvas) {
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    /********** ARC ROTATE CAMERA EXAMPLE **************************/

    // Creates, angles, distances and targets the camera
    var camera = new BABYLON.AnaglyphArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0),0.033, scene);

    // This positions the camera
    camera.setPosition(new BABYLON.Vector3(0, 0, -10));

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

    /**************************************************************/

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    
    //Materials
    var redMat = new BABYLON.StandardMaterial("red", scene);
    redMat.diffuseColor = new BABYLON.Color3(1, 0, 0);
    redMat.emissiveColor = new BABYLON.Color3(1, 0, 0);
    redMat.specularColor = new BABYLON.Color3(1, 0, 0);
    
    var greenMat = new BABYLON.StandardMaterial("green", scene);
    greenMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
    greenMat.emissiveColor = new BABYLON.Color3(0, 1, 0);
    greenMat.specularColor = new BABYLON.Color3(0, 1, 0);
    
    var blueMat = new BABYLON.StandardMaterial("blue", scene);
    blueMat.diffuseColor = new BABYLON.Color3(0, 0, 1);
    blueMat.emissiveColor = new BABYLON.Color3(0, 0, 1);
    blueMat.specularColor = new BABYLON.Color3(0, 0, 1);
    
    // Shapes
    var plane1 = new BABYLON.Mesh.CreatePlane("plane1", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    plane1.position.x = -3;
    plane1.position.z = 0;
    plane1.material = redMat;
    
    var plane2 = new BABYLON.Mesh.CreatePlane("plane2", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    plane2.position.x = 3;
    plane2.position.z = -1.5;
    plane2.material = greenMat;
    
    var plane3 = new BABYLON.Mesh.CreatePlane("plane3", 3, scene, true, BABYLON.Mesh.DOUBLESIDE);
    plane3.position.x = 3;
    plane3.position.z = 1.5;
    plane3.material = blueMat;
    
    var ground = BABYLON.Mesh.CreateGround("ground1", 10, 10, 2, scene);
    
    return scene;
}
const canvasAnaglyphArcRotateCamera = document.getElementById('renderCanvas-7-anaglypharcrotatecamera')
const engineAnaglyphArcRotateCamera = new BABYLON.Engine(canvasAnaglyphArcRotateCamera,true)
const sceneAnaglyphArcRotateCamera = createSceneAnaglyphArcRotateCamera(engineAnaglyphArcRotateCamera,canvasAnaglyphArcRotateCamera) 
engineAnaglyphArcRotateCamera.runRenderLoop(function(){sceneAnaglyphArcRotateCamera.render()})

效果如下：

拖动鼠标观察，已经产生了效果，带上你的红蓝眼睛试试吧！

设备方向相机 （Device Orientation Camera)

这个相机是会根据设备的惯导传感器来改变自身的姿态。当转动设备或者移动的时候，相机的姿态会发生变化。

使用以下方法创建设备方向相机：

1
const camera = new BABYLON.DeviceOrientationCamera("camera",position,scene);

其中position表示相机的位置，我们还可以通过camera.setPosition(newPosition)方法重新定义相机位置，也可以使用camera.setTarget(targetPosition)方法设置观察位置。（同通用相机）

我们还可以设置相机的灵敏度

  • camera.angularSensibility number 相机角度变化灵敏度
  • camera.moveSensibility number 相机移动灵敏度

使用Babylon代码创建场景，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
var createSceneDeviceOrientationCamera = function (engine,canvas) {
     // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    /********** DEVICE ORIENTATION CAMERA EXAMPLE **************************/

    // This creates and positions a device orientation camera 	
    var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 0, 0), scene);

    // This targets the camera to scene origin
    camera.setTarget(new BABYLON.Vector3(0, 0, 10));

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

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    
    //Materials
    var redMat = new BABYLON.StandardMaterial("red", scene);
    redMat.diffuseColor = new BABYLON.Color3(1, 0, 0);
    redMat.emissiveColor = new BABYLON.Color3(1, 0, 0);
    redMat.specularColor = new BABYLON.Color3(1, 0, 0);
    
    var greenMat = new BABYLON.StandardMaterial("green", scene);
    greenMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
    greenMat.emissiveColor = new BABYLON.Color3(0, 1, 0);
    greenMat.specularColor = new BABYLON.Color3(0, 1, 0);
    
    var blueMat = new BABYLON.StandardMaterial("blue", scene);
    blueMat.diffuseColor = new BABYLON.Color3(0, 0, 1);
    blueMat.emissiveColor = new BABYLON.Color3(0, 0, 1);
    blueMat.specularColor = new BABYLON.Color3(0, 0, 1);
    
    var yellowMat = new BABYLON.StandardMaterial("yellow", scene);
    yellowMat.diffuseColor = new BABYLON.Color3(1, 1, 0);
    yellowMat.emissiveColor = new BABYLON.Color3(1, 1, 0);
    yellowMat.specularColor = new BABYLON.Color3(1, 1, 0);
    
    var orangeMat = new BABYLON.StandardMaterial("orange", scene);
    orangeMat.diffuseColor = new BABYLON.Color3(1, 0.5, 0);
    orangeMat.emissiveColor = new BABYLON.Color3(1, 0.5, 0);
    orangeMat.specularColor = new BABYLON.Color3(1, 0.5, 0);
    
    var purpleMat = new BABYLON.StandardMaterial("purple", scene);
    purpleMat.diffuseColor = new BABYLON.Color3(1, 0, 1);
    purpleMat.emissiveColor = new BABYLON.Color3(1, 0, 1);
    purpleMat.specularColor = new BABYLON.Color3(1, 0, 1);
    
    // Shapes
    var box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 5}, scene);
    box1.position = new BABYLON.Vector3(0, 0, 10);
    box1.material = redMat;
    
    var box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 5}, scene);
    box2.position = new BABYLON.Vector3(0, 0, -10);
    box2.material = greenMat;
    
    var box3 = BABYLON.MeshBuilder.CreateBox("box3", {size: 5}, scene);
    box3.position = new BABYLON.Vector3(10, 0, 0);
    box3.material = blueMat;
    
    var box4 = BABYLON.MeshBuilder.CreateBox("box4", {size: 5}, scene);
    box4.position = new BABYLON.Vector3(-10, 0, 0);
    box4.material = yellowMat;
    
    var box5 = BABYLON.MeshBuilder.CreateBox("box5", {size: 5}, scene);
    box5.position = new BABYLON.Vector3(0, 10, 0);
    box5.material = orangeMat;
    
    var box6 = BABYLON.MeshBuilder.CreateBox("box6", {size: 5}, scene);
    box6.position = new BABYLON.Vector3(0, -10, 0);
    box6.material = purpleMat;
    
    return scene;
}
const canvasDeviceOrientationCamera = document.getElementById('renderCanvas-7-deviceorientationcamera')
const engineDeviceOrientationCamera = new BABYLON.Engine(canvasDeviceOrientationCamera,true)
const sceneDeviceOrientationCamera = createSceneDeviceOrientationCamera(engineDeviceOrientationCamera,canvasDeviceOrientationCamera) 
engineDeviceOrientationCamera.runRenderLoop(function(){sceneDeviceOrientationCamera.render()})

效果如下：

现在移动你的电子设备（手机，平板等），看看效果吧。

其他

其他相机请参考PowerfulCameraTypes，或接下来的 HowTo 部分。