Cesium学习笔记（四）添加3D模型

最新推荐文章于 2024-03-26 13:50:08 发布

_Royal

最新推荐文章于 2024-03-26 13:50:08 发布

阅读量8.4k

点赞数 2

分类专栏： GIS三维文章标签： cesiumjs开发实践

本文链接：https://blog.csdn.net/hobhunter/article/details/75014054

版权

GIS三维专栏收录该内容

8 篇文章 5 订阅

订阅专栏

之前写的这篇文章： Cesium学习笔记（一）添加实体，里面记录了关于添加实体的方法，enetity.add() 选项里面还有一个model属性，通过这个属性可以添加一个3D模型（模型也算是一个实体）。下面就用这个方法来添加模型~~

添加实体方式添加模型

...
<body>
<div id="cesiumDemo"></div>
<script type="text/javascript">
    // 初始化
    let view = new Cesium.Viewer('cesiumDemo', {
        baseLayerPicker: false,
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
        })
    });

    let position = Cesium.Cartesian3.fromDegrees(116.236393, 39.975119, 25000);
    // 设置模型方向
    let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(45), 0, 0);
    let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
    // 添加模型
    let model = view.entities.add({
        // 模型id
        id:'model',
        // 模型位置
        position: position,
        // 模型方向
        orientation: orientation,
        // 模型资源
        model: {
            // 模型路径
            uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
            // 模型最小刻度
            minimumPixelSize: 64,
            // 模型最大刻度
            maximumSize: 128,
            // 模型是否可见
            show: true,
            // 模型轮廓颜色
            silhouetteColor:Cesium.Color.WHITE,
            // 模型轮廓大小，单位px
            silhouetteSize:5,
            // 模型颜色
            color: Cesium.Color.CORAL
        },
        // 添加描述
        description: '飞机模型'
    });
    // 视角切换到模型
    view.trackedEntity = model;
</script>
</body>
...

model里面还有不少属性，具体的可以去查看官方文档

飞机模型

这只是一种方法，官网Demo里还有另外一种方法

添加原型方式添加模型

    let view = new Cesium.Viewer('cesiumDemo', {
        baseLayerPicker: false,
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
        })
    });

    let position = Cesium.Cartesian3.fromDegrees(116.236393, 39.975119, 25000);
    // 设置模型方向
    let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(45), 0, 0);
    // 生成一个函数，该函数从以提供的原点为中心的参考帧到提供的椭圆体的固定参考帧计算4x4变换矩阵。
    let fixedFrame = Cesium.Transforms.localFrameToFixedFrameGenerator('north','west');
    let scene = view.scene;
    scene.primitives.add(Cesium.Model.fromGltf({
        // 资源路径
        url: '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
        // 模型矩阵
        modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrame, position),
        // 模型最小刻度
        minimumPixelSize: 128,
        // 模型标尺
        scale : 2.0,
        // 模型最大刻度
        maximumScale: 20000,
        // 仅用于调试。显示模型绘制时的边界球。
        debugShowBoundingVolume : false,
        // 仅用于调试，显示魔仙绘制时的线框
        debugWireframe : false
    }));

总结

entities添加模型底层也是适用的primities方式。在图形的绘制方面和GPU的使用方面效率也更高。从代码上来看，第一种方式相对于后一种方式也更加简洁。如果需要涉及到模型矩阵方面的话还是使用第二种方式简便。

_Royal

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
5
评论
Cesium学习笔记（四）添加3D模型

之前写的这篇文章： Cesium学习笔记（一）添加实体，里面记录了关于添加实体的方法，enetity.add() 选项里面还有一个model属性，通过这个属性可以添加一个3D模型（模型也算是一个实体）。下面就用这个方法来添加模型~~添加实体方式添加模型...<body><div id="cesiumDemo"></div><script type="text/javascript">
复制链接

扫一扫