最近整理了下手上的代码，以下是对模型压平的说明。
原理是使用了customShader来重新设置了模型的着色器，通过修改模型顶点的坐标来实现了压平。
废话不多说，下面上代码：
/**
* @class
* @description 3dtiles模型压平
*/
class Flat {
/**
*
* @param {Cesium.Cesium3DTileset} tileset 三维模型
* @param {Object} opt
* @param {Number} opt.flatHeight 压平高度
*/
constructor(tileset, opt) {
if (!tileset) return;
this.tileset = tileset;
this.opt = opt || {};
this.flatHeight = this.opt.flatHeight || 0;
this.center = tileset.boundingSphere.center.clone();
this.matrix = Cesium.Transforms.eastNorthUpToFixedFrame(this.center.clone());
this.localMatrix = Cesium.Matrix4.inverse(this.matrix, new Cesium.Matrix4());
// 多面的坐标数组
this.regionList = [];
// 多个面坐标转为局部模型坐标
this.localPositionsArr = [];
}
/**
* 添加压平面
* @param {Object} attr 参数
* @param {Cesium.Cartesian3[]} attr.positions 压平面坐标
* @param {Number} attr.height 压平深度，当前不支持单独设置
* @param {Number} attr.id 唯一标识
*/
addRegion(attr) {
let { positions, height, id } = attr || {};
// this.flatHeight = height;
if (!id) id = (new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0);
this.regionList.push(attr);
for (let i = 0; i < this.regionList.length; i++) {
let item = this.regionList[i];
const positions = item.positions;
let localCoor = this.cartesiansToLocal(positions);
this.localPositionsArr.push(localCoor);
}
const funstr = this.getIsinPolygonFun(this.localPositionsArr);
let str = ``;
for (let i = 0; i < this.localPositionsArr.length; i++) {
const coors = this.localPositionsArr[i];
const n = coors.length;
let instr = ``;
coors.forEach((coordinate, index) => {
instr += `points_${n}[${index}] = vec2(${coordinate[0]}, ${coordinate[1]});\n`;
})
str += `
${instr}
if(isPointInPolygon_${n}(position2D)){
vec4 tileset_local_position_transformed = vec4(tileset_local_position.x, tileset_local_position.y, ground_z, 1.0);
vec4 model_local_position_transformed = czm_inverseModel * u_tileset_localToWorldMatrix * tileset_local_position_transformed;
vsOutput.positionMC.xy = model_local_position_transformed.xy;
vsOutput.positionMC.z = model_local_position_transformed.z+ modelMC.z*0.002;
return;
}`;
}
this.updateShader(funstr, str);
}
/**
* 根据id删除压平的面
* @param {String} id 唯一标识
*/
removeRegionById(id) {
if (!id) return;
this.regionList = this.regionList.filter((attr) => {
return attr.id != id;
})
this.localPositionsArr = [];
for (let i = 0; i < this.regionList.length; i++) {
let item = this.regionList[i];
const positions = item.positions;
let localCoor = this.cartesiansToLocal(positions);
this.localPositionsArr.push(localCoor);
}
const funstr = this.getIsinPolygonFun(this.localPositionsArr);
let str = ``;
for (let i = 0; i < this.localPositionsArr.length; i++) {
const coors = this.localPositionsArr[i];
const n = coors.length;
let instr = ``;
coors.forEach((coordinate, index) => {
instr += `points_${n}[${index}] = vec2(${coordinate[0]}, ${coordinate[1]});\n`;
})
str += `
${instr}
if(isPointInPolygon_${n}(position2D)){
vec4 tileset_local_position_transformed = vec4(tileset_local_position.x, tileset_local_position.y, ground_z, 1.0);
vec4 model_local_position_transformed = czm_inverseModel * u_tileset_localToWorldMatrix * tileset_local_position_transformed;
vsOutput.positionMC.xy = model_local_position_transformed.xy;
vsOutput.positionMC.z = model_local_position_transformed.z+ modelMC.z*0.002;
return;
}`;
}
this.updateShader(funstr, str);
}
/**
* 销毁
*/
destroy() {
this.tileset.customShader = undefined;
}
/**
* 根据数组长度，构建 判断点是否在面内 的压平函数
*/
getIsinPolygonFun(polygons) {
let pmap = polygons.map((polygon) => polygon.length);
let uniqueArray = this.getUniqueArray(pmap);
let str = ``;
uniqueArray.forEach(length => {
str += `
vec2 points_${length}[${length}];
bool isPointInPolygon_${length}(vec2 point){
int nCross = 0; // 交点数
const int n = ${length};
for(int i = 0; i < n; i++){
vec2 p1 = points_${length}[i];
vec2 p2 = points_${length}[int(mod(float(i+1),float(n)))];
if(p1[1] == p2[1]){
continue;
}
if(point[1] < min(p1[1], p2[1])){
continue;
}
if(point[1] >= max(p1[1], p2[1])){
continue;
}
float x = p1[0] + ((point[1] - p1[1]) * (p2[0] - p1[0])) / (p2[1] - p1[1]);
if(x > point[0]){
nCross++;
}
}
return int(mod(float(nCross), float(2))) == 1;
}
`
})
return str
}
updateShader(vtx1, vtx2) {
let flatCustomShader = new Cesium.CustomShader({
uniforms: {
u_tileset_localToWorldMatrix: {
type: Cesium.UniformType.MAT4,
value: this.matrix,
},
u_tileset_worldToLocalMatrix: {
type: Cesium.UniformType.MAT4,
value: this.localMatrix,
},
u_flatHeight: {
type: Cesium.UniformType.FLOAT,
value: this.flatHeight,
},
},
vertexShaderText: `
// 所有isPointInPolygon函数
${vtx1}
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput){
vec3 modelMC = vsInput.attributes.positionMC;
vec4 model_local_position = vec4(modelMC.x, modelMC.y, modelMC.z, 1.0);
vec4 tileset_local_position = u_tileset_worldToLocalMatrix * czm_model * model_local_position;
vec2 position2D = vec2(tileset_local_position.x,tileset_local_position.y);
float ground_z = 0.0 + u_flatHeight;
// 多个多边形区域
${vtx2}
}`,
});
this.tileset.customShader = flatCustomShader;
}
// 数组去重，不能处理嵌套的数组
getUniqueArray = (arr) => {
return arr.filter(function (item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
// 世界坐标转数组局部坐标
cartesiansToLocal(positions) {
let arr = [];
for (let i = 0; i < positions.length; i++) {
let position = positions[i];
let localp = Cesium.Matrix4.multiplyByPoint(
this.localMatrix,
position.clone(),
new Cesium.Cartesian3()
)
arr.push([localp.x, localp.y]);
}
return arr;
}
}
export default Flat;调用方式：
let flatTool = new Flat(tileset, {
flatHeight: -30
});
flatTool.addRegion({
positions : positions,
id : new Date().getTime()
});以下是仓库地址：文章来源：https://www.toymoban.com/news/detail-788630.html
CesiumExp-tilesetFlat: 3dtiles模型压平
文章来源地址https://www.toymoban.com/news/detail-788630.html
到了这里，关于Cesium 模型压平的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
