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] SuperMap iClient3D for WebGL教程（Entity）-ModelGraphics

[2] Cesium的Property机制总结

Cesium案例解析(四)——3DModels模型加载的更多相关文章

  1. Java开发学习(二十三)----SpringMVC入门案例、工作流程解析及设置bean加载控制

    一.SpringMVC概述 SpringMVC是隶属于Spring框架的一部分,主要是用来进行Web开发,是对Servlet进行了封装.SpringMVC是处于Web层的框架,所以其主要的作用就是用来 ...

  2. cesium模型加载-加载fbx格式模型

    整体思路: fbx格式→dae格式→gltf格式→cesium加载gltf格式模型 具体方法: 1. fbx格式→dae格式 工具:3dsMax, 3dsMax插件:OpenCOLLADA, 下载地址 ...

  3. OpenGL OBJ模型加载.

    在我们前面绘制一个屋,我们可以看到,需要每个立方体一个一个的自己来推并且还要处理位置信息.代码量大并且要时间.现在我们通过加载模型文件的方法来生成模型文件,比较流行的3D模型文件有OBJ,FBX,da ...

  4. Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据

    目录 1. 概述 2. 案例 3. 结果 1. 概述 3D Tiles是用于传输和渲染大规模3D地理空间数据的格式,例如摄影测量,3D建筑,BIM / CAD,实例化特征和点云等.与常规的模型文件格式 ...

  5. 深入解析 composer 的自动加载原理 （转）

    深入解析 composer 的自动加载原理 转自:https://segmentfault.com/a/1190000014948542 前言 PHP 自5.3的版本之后,已经重焕新生,命名空间.性状 ...

  6. Swift语法基础入门四(构造函数, 懒加载)

    Swift语法基础入门四(构造函数, 懒加载) 存储属性 具备存储功能, 和OC中普通属性一样 // Swfit要求我们在创建对象时必须给所有的属性初始化 // 如果没办法保证在构造方法中初始化属性, ...

  7. DirectX11 With Windows SDK--19 模型加载：obj格式的读取及使用二进制文件提升读取效率

    前言 一个模型通常是由三个部分组成:网格.纹理.材质.在一开始的时候,我们是通过Geometry类来生成简单几何体的网格.但现在我们需要寻找合适的方式去表述一个复杂的网格,而且包含网格的文件类型多种多 ...

  8. 6_1 持久化模型与再次加载_探讨(1)_三种持久化模型加载方式以及import_meta_graph方式加载持久化模型会存在的变量管理命名混淆的问题

    笔者提交到gitHub上的问题描述地址是:https://github.com/tensorflow/tensorflow/issues/20140 三种持久化模型加载方式的一个小结论 加载持久化模型 ...

  9. Wish3D用户必看！模型加载失败原因汇总

    上传到Wish3D的模型加载不出来,作品显示页面漆黑一片,是什么原因? 很有可能是操作过程中的小失误,不妨从以下几点检查.还是不行的请加QQ群(Wish3D交流群3):635725654,@Wish3 ...

随机推荐

  1. idea实现svn拉分支和合并分支的教程

    原文地址:https://blog.csdn.net/qq_27471405/article/details/78498260 今天测试了一下svn拉分支和合并分支的教程,决定分享给大家 拉分支教程: ...

  2. Java基础语法和基本数据类型

    Java基础语法 一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作. 对象:对象是类的一个实例,有状态(属性)和行为(方法). 类:类是一个模板,他描述一类对象的行为 ...

  3. Windows环境下配置robotframework

    Robot Framework安装准备 一.python3.6以上版本 安装过程中勾选“add python to path”,就可以自动配置好环境变量. 安装完成后在命令行输入python,如下图所 ...

  4. Java8 Stream用法详解

    1.概述 Stream 的原理:将要处理的元素看做一种流,流在管道中传输,并且可以在管道的节点上处理,包括过滤筛选.去重.排序.聚合等.元素流在管道中经过中间操作的处理,最后由最终操作得到前面处理的结 ...

  5. PHP批量去除文件BOM头

    auto 是否自动替换 默认否 dir 检查目录 默认./ display 是否显示所有文件 默认只显示有bom头的文件 <?php empty($_GET['auto']) && ...

  6. Java 添加、读取、删除Excel形状

    本文介绍通过java程序在excel中操作形状(图形)的方法,包括: 1. 添加形状(如设置形状类型/位置/大小.形状颜色填充(单色/渐变色/纹理/图片填充).形状显示或隐藏.形状倾斜角度.添加文本到 ...

  7. ubuntu “快捷方式”

    1.创建.Desktop文件 sudo gedit /usr/share/applications/pycharm.desktop 2.建立pycharm.desktop [Desktop Entry ...

  8. Python3基础之初识Python

    Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序, 作为ABC语 ...

  9. jsp路径

    访问静态资源的时候${pageContext.request.Context}没有作用,在浏览器F12调试的时候发现,路径并没有被解释为项目的根路径,而是没有解释出来,还是${pageContext. ...

  10. springboot之整合基本的jdbc并操作Mysql数据库

    对于数据访问层,无论是SQL还是NOSQL,springboot默认采用整合spring data方式进行统一处理,添加大量自动配置,屏蔽了许多设置,引入各种xxxTemplate,xxxReposi ...