1. 概述

Cesium自带的3D Models示例，展示了如何加载glTF格式三维模型数据。glTF是为WebGL量身定制的数据格式，在网络环境下有自己的优点。可以在Cesium的源码包中找到一些该类型的数据。

2. 代码

HTML页面3DModels.html代码如下：

<!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, maximum-scale=1, minimum-scale=1, user-scalable=no">    <meta name="description" content="Create 3D models using glTF.">    <meta name="cesium-sandcastle-labels" content="Beginner, Tutorials, Showcases">    <title>Cesium Demo</title>    <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>    <style>        @import url(../Build/Cesium/Widgets/widgets.css);        html,        body {
                width: 100%;            height: 100%;            margin: 0;            padding: 0;            overflow: hidden;            font-family: sans-serif;            background: #000;        }        .fullSize {
                display: block;            position: absolute;            top: 0;            left: 0;            border: none;            width: 100%;            height: 100%;        }        #toolbar {
                margin: 5px;            padding: 2px 5px;            position: absolute;        }    </style></head><body>    <div id="cesiumContainer" class="fullSize"></div>    <div id="toolbar">        <select id = "model_select" class="cesium-button">            <option value="Aircraft">Aircraft</option>            <option value="Ground Vehicle">Ground Vehicle</option>            <option value="Hot Air Balloon">Hot Air Balloon</option>            <option value="Milk Truck">Milk Truck</option>            <option value="Skinned Character">Skinned Character</option>            <option value="Draco Compressed Model">Draco Compressed Model</option>        </select>    </div>    <script src="3DModels.js"></script></body></html>

主要的javascript代码3DModels.js如下：

"use strict"//Add your ion access token from cesium.com/ion/ Cesium.Ion.defaultAccessToken = '你申请的key';//var viewer = new Cesium.Viewer('cesiumContainer');var viewer = new Cesium.Viewer('cesiumContainer', {
       infoBox: false,    selectionIndicator: false,    shadows: true,    shouldAnimate: true});function createModel(url, height) {
       viewer.entities.removeAll();    var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);    var heading = Cesium.Math.toRadians(135);    var pitch = 0;    var roll = 0;    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);    var entity = viewer.entities.add({
           name: url,        position: position,        orientation: orientation,        model: {
               uri: url,            minimumPixelSize: 128,            maximumScale: 20000        }    });    viewer.trackedEntity = entity;}var model_select = document.getElementById("model_select");if (model_select) {
       model_select.onchange = function () {
                   switch (model_select.selectedIndex) {
               case 0:                           createModel('../SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);                break;            case 1:                createModel('../SampleData/models/GroundVehicle/GroundVehicle.glb', 0);                break;            case 2:                createModel('../SampleData/models/CesiumBalloon/CesiumBalloon.glb', 1000.0);                break;            case 3:                createModel('../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0);                break;            case 4:                createModel('../SampleData/models/CesiumMan/Cesium_Man.glb', 0);                break;            case 5:                createModel('../SampleData/models/DracoCompressed/CesiumMilkTruck.gltf', 0);                break;            default:                break;        }    }    model_select.value="Aircraft";    model_select.onchange();  }

运行效果如下：

3. 解析

3D模型在Cesium中被描述为名为Cesium.Entity的实体类，可以通过这个类加载gltf的3D模型数据。而地球显示组件Cesium.Viewer存在一个成员变量entities，它就是Cesium.Entity的集合类，提供了add函数接口。所以关键代码如下：

var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);var heading = Cesium.Math.toRadians(135);var pitch = 0;var roll = 0;var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);var entity = viewer.entities.add({
       name: url,    position: position,    orientation: orientation,    model: {
           uri: url,        minimumPixelSize: 128,        maximumScale: 20000    }});

add函数填入的参数及其就是创建Cesium.Entity对象需要的options对象：

其中，model键的值就是一个Cesium.ModelGraphics对象，也就是想要加载的的gltf模型，它也有创建自己的options对象：

参数minimumPixelSize表示模型缩小到多少像素后，不再能被缩小。

maximumScale这个参数就有点不好理解了，文档描述为模型的最大比例尺寸，minimumPixelSize的最大上限。从实际表现上来看，应该表示的就是，缩放时保持模型保持一定的尺度不变，但是不能保持永远不变，当缩放一定的尺度后，就会缩放一起变小。这个值就是第二次缩放时的尺度。

模型的位置以及方位参数是有外部的Cesium.Entity来决定的。position是其位置信息，orientation是方位信息，这里有点像给Camera设置参数的部分，只不过传入的方位参数通过headingPitchRollQuaternion进一步转换成了四元数。

另外一个值得关注的点就是，从文档中可以看出很多options对象的键值其实是Property类型，或者是与Property相关的类型。这里面其实包含了Cesium的Property机制，简单来说就是这些值可以与时间相关联，在不同的时间可以动态地返回不同的属性值，能够数据驱动，实时动态三维展示。这个Property机制，值得进一步研究。

4. 参考

[1]
[2]

转载地址：http://aawx.baihongyu.com/

你可能感兴趣的文章

Mura CMS processAsyncObject SQL注入漏洞复现(CVE-2024-32640)