Cesium.js（6）：Cesium相机系统-EW帮帮网

Camera表示观察场景的视角。通过操作摄像机，可以控制视图的位置、方向和角度。

1 setView

setView 方法允许你指定相机的目标位置和姿态。你可以通过 Cartesian3 对象来指定目标位置，并通过 orientation 对象来设置相机的航向、俯仰和翻滚角。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相机</title>
    <script src="../../libs/Cesium/Cesium.js"></script>
    <link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="puiedu-cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = '你的key';
        const viewer = new Cesium.Viewer('puiedu-cesiumContainer');
        
        const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);
        viewer.camera.setView({
            destination:position,
            orientation:{
                heading:Cesium.Math.toRadians(0),
                pitch:Cesium.Math.toRadians(-90),
                roll:0
            }
        })
        
    </script>
</body>
</html>

destination：接受两种类型，一个是Cartesian3，我们这里用鼠标点击获取到经纬度之后，转换成笛卡尔坐标系传递。另一个类型是Rectangle，这个我们在下边讲解。

orientation（欧拉角）：调整相机视角方向的；它有3个参数：heading、pitch、roll

heading 值为 0 时，指向正北方，随着数值变大，顺时针旋转（模型左右摆动），航向角，代表飞机的航向。
pitch 值为 0 时，相机前后保持水平，改变数值（模型上下摆动），负值时俯视，负得越大，越向下俯视，正值时仰视，正得越大，越向上仰视，这就是为什么用-180°-180°的角度范围，而不是0°-360°，很方便记忆和理解，俯仰角，俯（向下）为负，仰（向上）为正。
roll 值为 0 时，相机左右保持水平，改变数值（模型左右摆动），roll和pitch的表现类似，只是将前后变成了左右，左为负，右为正，用-180°-180°也很方便记忆和理解。

duration：飞行时间，单位秒；

您可以修改控件上的值，然后看每个值被修改后，相机是如何变化的，您会得出以下结论。

效果如下：

2 flyTo

flyTo 方法会让相机以动画的方式飞到指定的位置，你可以设置飞行时间和其他动画参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相机</title>
    <script src="../../libs/Cesium/Cesium.js"></script>
    <link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="puiedu-cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = '你的key';
        const viewer = new Cesium.Viewer('puiedu-cesiumContainer');
        
        const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);

        viewer.camera.flyTo({
            destination:position,
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-90),
                roll: 0
            },
            duration:5,
        })
        
    </script>
</body>
</html>

这里的参数和setView中的一致，这里就不讲解了。

效果如下：

启动后，会发现相机通过飞行的方式到底制定位置。

3 lookAt

lookAt 方法允许相机以某个位置为中心来确定位置和姿态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相机</title>
    <script src="../../libs/Cesium/Cesium.js"></script>
    <link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="puiedu-cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = '你的key';
        const viewer = new Cesium.Viewer('puiedu-cesiumContainer');
        
        const center = Cesium.Cartesian3.fromDegrees(116.39,39.91);
        const heading = Cesium.Math.toRadians(50);
        const pitch = Cesium.Math.toRadians(-90);
        const range = 2500;
        viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading,pitch,range));
        
    </script>
</body>
</html>

效果如下：

4 viewBoundingSphere

它的视角切换效果也是和setView方法一样，没有飞行过渡效果，直接切换视口到指定目的地。优点是可以指定玩目标点后，可以从多个角度更好的观测。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相机</title>
    <script src="../../libs/Cesium/Cesium.js"></script>
    <link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="puiedu-cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = '你的key';
        const viewer = new Cesium.Viewer('puiedu-cesiumContainer');
        
        
        const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,1500);
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90,0,0));
        var entity = viewer.entities.add({
            position:position,
            orientation:orientation,
            model:{
                uri:"../../libs/models/Cesium_Air.glb",
                minimumPixelSize:100,
                maximumScale:10000,
                show:true
            }
        });
        viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0));

    </script>
</body>
</html>

效果如下：

无论如何移动相机的视角都是绑定在飞机模型上的，由此发现，当我们需要对一个物体进行多角度观测时，或者建筑物进行定点漫游时，我们就需要viewBoundingSphere方法。

Cesium.js（6）：Cesium相机系统

1 setView

2 flyTo

3 lookAt

4 viewBoundingSphere

网站公告

今日签到

热门文章

最新发布