cesium 学习(五) 加载场景模型

cesium 学习(五) 加载场景模型

一、前言

　　现在开始实际的看看效果，目前我所接触到基本上都是使用Cesium加载模型这个内容，以及在模型上进行操作。So，现在进行一些加载模型的学习，数据的话可以去网上找，因为目前使用的都是需要保密的数据，所以不能发在网上。

二、加载Entity类型模型

　　说到加载Entity模型，内容就有点多了，cesium场景中的点、线、面、label以及模型（gltf、glb）；还有圆、墙体、方体、球等几何对象也都可以使用Entity来加载。下面分别加载试试看。

2.1加载点、线、面

var viewer = new Cesium.Viewer('cesiumContainer');  // 场景查看器对象
// 点的Entity 
var pointEntity = new Cesium.Entity({
    id: 'point', // id属性
    position: Cesium.Cartesian3.fromDegrees(103, 30, 10), // 位置
    point: {  // 点
        color: new Cesium.Color.fromCssColorString("#3388ff"), // 点颜色
        pixelSize: 10,  // 点大小
        outlineColor: new Cesium.Color.fromCssColorString("#ffffff"), // 点的外圈线颜色
        outlineWidth: 2,  // 点的外圈线宽度
        disableDepthTestDistance: Number.POSITIVE_INFINITY  // 被遮挡是否可见（也就是将这个Entity在场景中置顶）
    }
});
// 线的Entity
var lineEntity = new Cesium.Entity({
    name: "line", // 线的name属性
    polyline: {  // 线
        positions: [Cesium.Cartesian3.fromDegrees(103, 30, 50), Cesium.Cartesian3.fromDegrees(104, 30, 50)], // 由点构线
         5.0, // 线的宽度
        material: new Cesium.PolylineGlowMaterialProperty({
            color: Cesium.Color.GOLD,
        }), // 线的材质、样式
        depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
            color: Cesium.Color.GOLD,
        }),  // 视线被遮挡处的材质、样式（和上一个材质一样的话则就不会被遮挡，类似置顶效果）
    }
});
// 面的Entity，其他Entity属性可以自行查看API
var polygon = new Cesium.Entity({
    polygon: {
        height: 0.1,
        hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([103, 30, 10, 103, 40, 10, 104, 30, 10])),  // 面的顶点坐标集合
        material: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2), // 材质样式
        perPositionHeight: true,  // 是否支持坐标高度  
    }
});

2.2加载label

　　其实label一般和其他一起使用，比如点。

var entity = viewer.entities.add({
    id: '123',
    position: Cesium.Cartesian3.fromDegrees(103, 30, 5),
    point: {
        color: new Cesium.Color.fromCssColorString("#3388ff"),
        pixelSize: 10,
        outlineColor: new Cesium.Color.fromCssColorString("#3388ff"),
        outlineWidth: 2,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
        disableDepthTestDistance: Number.POSITIVE_INFINITY
    },
    label: {
        text: 'lable文本',
        font: '10px sans-serif', // 字体
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 样式
        fillColor: Cesium.Color.WHITE, // 填充色
        outlineWidth: 1,  // 字体外圈线宽度（同样也有颜色可设置）
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
        pixelOffset: new Cesium.Cartesian2(0, -15),  // 中心位置
        disableDepthTestDistance: Number.POSITIVE_INFINITY
    }
});

2.3加载model

　　model类型的entity的资源可以是使用max等建模软件做的模型，然后转换成webgl加载的模型——gltf、glb。

var modelentity = viewer.entities.add({
    name:'123',
    description:"<div><img src='Build/Cesium/Assets/Images/cesium_credit.png' /><p>这是一辆大车！</div>", // 这是模型的描述属性，可以是html标签
    position : Cesium.Cartesian3.fromDegrees(103, 30), 
    model : {
        uri : 'Models/GroundVehicle/GroundVehicle.glb' // 资源路径
    }
});

三、加载Primitive类型模型

　　Primitive类型的加载也是比较有趣的，在Entity中不好控制的一些属性，可以在Primitive中很好的控制，比如Entity没有加载完成事件，而Primitive有加载完成事件；entity只能加载一个对象，而Primitive可以一次加载多个对象。

　　当然Entity类型也是有它独特的好处的，不然官方也不会将其制造出来，明显的就是Entity类封装了很多个几何对象，非常方便的绘制出几何对象来，而如果使用Primitive的话你需要懂的知识不少，比如几何对象的构造。

　　回到Primitive上，它的好处是高效加载、灵活绘制；Primitive的加载机制要好于Entity，这点我没有去做详细测试，但是网上是有这个测试的；对于其灵活性，主要是它可以不仅是单个几何对象，可以是多个几何对象或是不规则的对象的绘制加载，这点Entity没法做。

　　好，还是通过几个加载来认识下Primitive。

3.1加载模型

var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0)
);
viewer.scene.primitives.add(Cesium.Model.fromGltf({    //fromGltf方法：从Gltf资源加载模型  
    url: 'Models/GroundVehicle/GroundVehicle.glb',
    modelMatrix: modelMatrix,
    // minimumPixelSize : 512,     
    // maximumScale : 200000   
})
);
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 30.0)
});

 3.2加载动画模型 

var controller = viewer.scene.screenSpaceCameraController;
//中心点
var center = new Cesium.Cartesian3();
//模型的偏移参数
var hpRoll = new Cesium.HeadingPitchRoll();
//相机的偏移参数
var hpRange = new Cesium.HeadingPitchRange();
//初始位置
position = Cesium.Cartesian3.fromDegrees(103, 30, 0.08);
//速度向量
var speedVector = new Cesium.Cartesian3();
//生成一个由两个参考系生成的矩阵
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
//加载模型
peoPrimitive = scene.primitives.add(Cesium.Model.fromGltf({
    //这里需要把模型路径改下(如果你用的还是HelloWord.html的话就用这个,不是的话请自行修改)
    url: '../Models/GLTF/CesiumMan/Cesium_Man.glb',
    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
    //minimumPixelSize: 128
}));

//动画播放
peoPrimitive.readyPromise.then(function (model) {
    // 以半速循环动画            
    model.activeAnimations.addAll({
        speedup: 1,
        loop: Cesium.ModelAnimationLoop.REPEAT
    });
    //r=2*max(模型的半径，相机的最近距离)
    r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
    //镜头最近距离
    controller.minimumZoomDistance = r * 0.5;
    //计算center位置(也为下面的镜头跟随提供了center位置)
    Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
    //相机偏移角度
    var heading = Cesium.Math.toRadians(0.0);
    var pitch = Cesium.Math.toRadians(-20.0);
    hpRange.heading = heading;
    hpRange.pitch = pitch;
    hpRange.range = r + 5;
    //固定相机
    camera.lookAt(center, hpRange);
});

3.3加载多个几何对象 

var instances = [];
var positions_l = [......];  // Cartesian3坐标集合
positions_l.forEach(position => {
    instances.push(new Cesium.GeometryInstance({
        geometry: new Cesium.EllipseGeometry({
            center: position,
            semiMinorAxis: 0.024,
            semiMajorAxis: 0.024,
            height: 0,
            extrudedHeight: height1,
            material: Cesium.Color.GOLD,
        }),
        id: { guid: guid, jsj_name: name, name: '立杆' },
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GOLDENROD)
        }
    }));
});
// instances 就是很多个几何对象（这里是圆柱），然后后用primitive统一合并加载
var ganmodel = viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: instances,
    appearance: new Cesium.MaterialAppearance({
        material: Cesium.Material.fromType('Color', {
            color: Cesium.Color.GOLD
        }),
    }),
}));

四、总结

　　Entity加载方式在一定程度上是比Primitive方式更加方便的，特别是Entity不仅可以加载点、线、面、标签、模型、几何对象，而且是可以同时加载比如点和标签一起加载，如果愿意可以使用一个Entity对象加载一个点、一条线、一个面、一个模型、多个不同的几何对象！当然Primitive方法也是可以的，不过就没有Entity这么方便了。

　　Primitive主要是更偏底层一些，它可以使用Entity没有的一些属性，然后也更加灵活一些，比如我最后的添加多个立杆模型，Entity方法是没法构造一个Entity对象完成多个立杆的绘制的，有多少个立杆就得创建多少个Entity在内存使用上就稍微弱了。