遇到了一个需要对3D tiles建筑物某个建筑面进行单独渲染的问题,试了一下生成一个wall贴上去,发现会渲染不充分:
Cesium自带的墙体是没有厚度的矩形面,要用这种思路实现贴图就需要一定厚度的墙体,于是在官方实例中研究了很久,最后受到了一个示例的启发(https://sandcastle.cesium.com/index.html?src=Polyline%20Volume.html)。通过给polyline volume设置矩形的二维截面来实现。
JS代码
function solidWallGraphics(degreesArray,height,thickness,color) { // 经纬度数组、高度、厚度,颜色
return new Cesium.Entity({
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArray(degreesArray),
shape: [ // 截面形状
new Cesium.Cartesian2(-1*thickness, -0.5*height),
new Cesium.Cartesian2(thickness, -0.5*height),
new Cesium.Cartesian2(thickness, 0.5*height),
new Cesium.Cartesian2(-1*thickness, 0.5*height)
],
cornerType: Cesium.CornerType.MITERED, // 线段转折处样式
material: color,
},
});
}
示例
var viewer = new Cesium.Viewer('cesiumContainer');
var lineArray = [
114.0610415981867,22.51690192892875,
114.0608882027711,22.518392269819795,
114.06218796015155,22.519624755414235,
114.06386391062988,22.519249200132897,
];
// 高50米,厚2米,红色
var wall = solidWallGraphics(lineArray, 50, 2, Cesium.Color.RED.withAlpha(0.7));
viewer.entities.add(wall);
viewer.flyTo(wall);
应用
建筑面贴图渲染