【GIS技术】Cesium案例解析(四)——3DModels模型加载_编码库
首页 > 企业信息化 > GIS技术

【GIS技术】Cesium案例解析(四)——3DModels模型加载

在Cesium中加载3D模型。

目录

  • 1. 概述
  • 2. 代码
  • 3. 解析
  • 4. 参考

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

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();  
}

运行效果如下:Cesium加载模型

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对象:Cesium.Entity参数

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

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

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

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

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

[1] SuperMap iClient3D for WebGL教程(Entity)-ModelGraphics
[2] Cesium的Property机制总结

关键词:
后台-系统设置-扩展变量-手机广告位-内容正文底部
关于源码库

本站文章仅代表作者观点,不代表本站立场,所有资源非营利性免费分享。
编码库致力于各类程序源代码、程序设计与应用、网络程序源代码的资源共享,希望广大程序员努力学习,让我们用科技改变世界。
【GIS技术】Cesium案例解析(四)——3DModels模型加载:http://www.0314.online/xinxihua/gis/25995.html

后台-系统设置-扩展变量-手机广告位-评论底部广告位

合作伙伴

编码库

http://www.0314.online/

统计代码 | 冀ICP备19024639号-1

Powered By 编码库 信息来自互联网