zoukankan      html  css  js  c++  java
  • Cesium 1.54评测 【转】

    重要功能评测

    3dtiles数据上画线和贴纹理

     
    3dtiles数据上画线和贴纹理

    把线条贴到3dtiles上需要用到两个属性:clampToGround和classificationType。

    clampToGround属性用来表示该线段要贴地。1.54版以后贴地中的字同时指代地形和3dtiles数据。

    还有一个属性classificationType,则用来描述是否只贴地形(ClassificationType.TERRAIN),或者只贴3dtiles数据(ClassificationType.CESIUM_3D_TILE),或者二者都贴(ClassificationType.BOTH)。默认情况下是二者都贴。

    Entity API源码如下:

    var polyline2 = viewer.entities.add({
        polyline : {
            positions : positions2,
            clampToGround : true,
            width : 5,
            material : new Cesium.PolylineOutlineMaterialProperty({
                color : Cesium.Color.ORANGE,
                outlineWidth : 2,
                outlineColor : Cesium.Color.BLACK
            })
        }
    });
    

    Primitive API源码如下:

    // Polyline Glow
    scene.groundPrimitives.add(new Cesium.GroundPolylinePrimitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : new Cesium.GroundPolylineGeometry({
                positions : positions,
                width : 10.0
            })
        }),
        appearance : new Cesium.PolylineMaterialAppearance({
            material : Cesium.Material.fromType(Cesium.Material.PolylineGlowType)
        })
    }));
    

    Cesium 1.54版本以前,虽然可以做到几何体贴地,但是只能纯色贴入,并不能贴纹理。1.54版本以后,官方终于可以给3dtile数据贴上纹理了。效果如下:

     
    3dtile数据贴上纹理

    源码如下:

    var entity = viewer.entities.add({
        polygon : {
            hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromRadiansArray([-1.3194369277314022, 0.6988062530900625, -1.3193955980204217, 0.6988091578771254, -1.3193931220959367, 0.698743632490865, -1.3194358224045408, 0.6987471965556998])),
            material : '../images/Cesium_Logo_Color.jpg'
        }
    });
    

    增加对webp图片格式的支持

     
    对webp图片格式的支持

    Cesium增加了新的示例模型,路径如下:

    /Specs/Data/Models/Box-Textured-Webp/CesiumBoxWebp.gltf
    

    相关测试源码如下:

    var viewer = new Cesium.Viewer('cesiumContainer');
    
    var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0);
    var entity = viewer.entities.add({
        position : position,
        model : {
            uri : '../../../Specs/Data/Models/Box-Textured-Webp/CesiumBoxWebp.gltf',
            minimumPixelSize : 128,
            maximumScale : 20000
        }
    });
    viewer.trackedEntity = entity;
    

    新增恒向线(rhumb line)绘制多边形和线段

    下图中绿色线条即恒向线。

     
    绿色线条即恒向线

    可以观察红色线条和绿色线条的差别:给定的起点和终点相同,但是绘制出来的线条却不一样。其中红色线条描述的是地表最近距离的曲线,而绿色线条则描述的是恒向线,任意位置的延伸方向都是恒定的。图中起点和终点的纬度都是35,所以绿色线条是和35度纬度线是重合的。

    源码如下:

    var redLine = viewer.entities.add({
        name : 'Red line on terrain',
        polyline : {
            positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                            -125, 35]),
            width : 5,
            material : Cesium.Color.RED,
            clampToGround : true
        }
    });
    
    var greenRhumbLine = viewer.entities.add({
        name : 'Green rhumb line',
        polyline : {
            positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                            -125, 35]),
            width : 5,
            arcType : Cesium.ArcType.RHUMB,
            material : Cesium.Color.GREEN
        }
    

    新增了两个示例

     
    新增了两个示例

    Polylines on 3D Tiles示例

    Polylines on 3D Tiles示例用来描述将线段贴到3dtiles上,其中3dtiles数据有有两类。一类是倾斜摄影的,另外一类是BIM的。在电厂BIM模型的示例中可以看出,线条是贴在BIM模型的管线上的。

    点击查看本地Demo(需要本地编译源码才可使用)

     
    Polylines on 3D Tiles
     
    Polylines on 3D Tiles

    从上面的截图可以看出,贴地模式下线条是贴到3dtiles数据上了,不过会从上往下贯穿所有地方,毕竟没有高度上的限制,这样的话,对于BIM数据其实还是有问题的。有些地方并没有管线,但是照样会画上线条。

     
    Polylines on 3D Tiles
     
    Polylines on 3D Tiles

    贴地模式使用起来也很简单,只需要用到clampToGround和classificationType属性,另外注意一下,height不要赋值。源码截取如下:

    var powerplant = scene.primitives.add(
        new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(8564),
            show: false
        })
    );
    var pipes = viewer.entities.add({
        polyline : {
            positions : Cesium.Cartesian3.fromDegreesArray([
                -76.36053390920833, 34.949935893493596,
                -76.36055481641581, 34.94993589886988,
                -76.36055477047704, 34.94992280693651
            ]),
            width : 6,
            material : new Cesium.PolylineDashMaterialProperty({
                color : Cesium.Color.YELLOW,
                dashLength: 20.0
            }),
            show: false,
            clampToGround : true,
            classificationType: Cesium.ClassificationType.CESIUM_3D_TILE
        }
    });
    

    Time Dynamic Wheels示例

    这个示例用来展示轮胎转速随车辆运动速度快慢自动调整。该示例代码则描述如何将position转化为速度,再转化为轮胎转动角度,最后通过nodeTransformations属性作用于Model,从而实现车辆轮胎的转动。

     
    轮胎转速随车辆运动速度快慢自动调整
     
    轮胎转速随车辆运动速度快慢自动调整

    源码截取如下,position是一个SamplePositionProperty,通过在不同的时间点上设置不同的运动位置,来创建一个加速运动的车辆。velocityVectorProperty则根据position计算出每个时间点的速度。再由速度计算出轮胎转动的角度。(注:貌似这个地方的角度计算只是近似值,只有numberOfSamples越大时越准确。)

    var numberOfSamples = 100;
    for (var i = 0; i <= numberOfSamples; ++i) {
        var factor = (i / numberOfSamples);
        var time = Cesium.JulianDate.addSeconds(start, factor * totalSeconds, new Cesium.JulianDate());
    
        // Lerp using a non-linear factor so that the vehicle accelerates.
        var locationFactor = Math.pow(factor, 2);
        var location = Cesium.Cartesian3.lerp(startPosition, endPosition, locationFactor, new Cesium.Cartesian3());
        position.addSample(time, location);
        // Rotate the wheels based on how fast the vehicle is moving at each timestep.
        velocityVectorProperty.getValue(time, velocityVector);
        var metersPerSecond = Cesium.Cartesian3.magnitude(velocityVector);
        var wheelRadius = 0.52;//in meters.
        var circumference = Math.PI * wheelRadius * 2;
        var rotationsPerSecond = metersPerSecond / circumference;
    
        wheelAngle += ((Math.PI * 2 * totalSeconds) / numberOfSamples) * rotationsPerSecond;
        wheelAngleProperty.addSample(time, wheelAngle);
    }
    
    

    其他方面

    1. Entity API中的多个图形的classificationType属性的默认值修改成了ClassificationType.BOTH,也就是说,如果贴地,则会同时往地形和3dtiles数据上贴。

    2. ModelAnimation.speedup已删除,需要使用ModelAnimation.multiplier来代替。

    3. Scene.clampToHeight方法增加了width参数,需要留意。

     
    clampToHeight
    1. PolylineGeometry和SimplePolylineGeometry的followSurface属性被替换成arcType,arcType的值可以是ArcType.NONE、ArcType.GEODESIC和ArcType.RHUMB。

    2. 3dtiles性能有所提升(IBL导致)

    作者:vtxf
    链接:https://www.jianshu.com/p/aab4a0bb0d0e

  • 相关阅读:
    Toggle控制窗口的显隐
    碰撞检测(2D&&3D)
    3D空间 圆柱体画线
    鼠标拖动2D物体(图片)
    实现图片的闪烁效果
    UI 2D图片随鼠标旋转
    射线检测(Summary)
    [转]C#静态方法与非静态方法的比较
    获取精灵
    用于切割字符串的方法
  • 原文地址:https://www.cnblogs.com/mazhenyu/p/11819619.html
Copyright © 2011-2022 走看看