重要功能评测
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模型的管线上的。
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);
}
其他方面
-
Entity API中的多个图形的classificationType属性的默认值修改成了ClassificationType.BOTH，也就是说，如果贴地，则会同时往地形和3dtiles数据上贴。
-
ModelAnimation.speedup已删除，需要使用ModelAnimation.multiplier来代替。
-
Scene.clampToHeight方法增加了width参数，需要留意。
clampToHeight
-
PolylineGeometry和SimplePolylineGeometry的followSurface属性被替换成arcType，arcType的值可以是ArcType.NONE、ArcType.GEODESIC和ArcType.RHUMB。
-
3dtiles性能有所提升(IBL导致)
欢迎关注 Cesium实验室 ，QQ群号：595512567。
image.png
网友评论