目录
作者:taco
最近在支持的过程中,客户遇到了一个很困扰的问题。通过实体构建box,或者polygon等实体。去给他贴图。贴图的uv设置的明明是一样的,但是很不幸得出现了一个问题。方向竟然有正有反。测试发现这种现象和构建实体的方向,经纬度的值都会有所关联。而且不光是超图的iClient for Cesium 产品,原生最新的10.1+版本的Cesium也会有这个现象。那么我们该通过什么方式给实体附加模型呢?本篇文章基于 iClient for Webgl产品提供了一个新的放样思路。
第一步、创建贴图
我们使用ImageMaterialProperty方法创建纹理贴图信息并添加所需要的贴图。
let material = new SuperMap3D.ImageMaterialProperty({
image: "./image/香香.png",
color: SuperMap3D.Color.fromCssColorString("rgba(15, 239, 15, 1.0)"),
unique: true,
});
第二步、实例化需要放样的截面
let region = getRegion();
function getRegion() {
let region3d = new SuperMap3D.GeoRegion3D();
let regionpts = new SuperMap3D.Point3Ds();
regionpts.add(new SuperMap3D.Point3D(-2, 1, 0));
regionpts.add(new SuperMap3D.Point3D(2, 1, 0));
regionpts.add(new SuperMap3D.Point3D(2, -1, 0));
regionpts.add(new SuperMap3D.Point3D(-2, -1, 0));
region3d.addPart(regionpts);
return region3d;
}
界面采用的是Point3D构建的GeoRegion3D.大概意思是如何构建呢? 其实相当于一个平面的坐标系。直接构建出的截面是一个矩形。当然如果你想构建出其他的界面只要更改这里point3d的值即可。
第三步、构建放样范围
有了截面,我们需要根据这个界面进行拉伸。我们通过GeoLine3D来创建我们放样的范围即可。
let line3d = createline3D()
function createline3D() {
let line3d = new SuperMap3D.GeoLine3D();
line3d.parts = [4];
line3d.points.push({x:116.44564437859106, y:39.90302628980606, z:0})
line3d.points.push({x:116.44897779551044, y:39.91745799561381, z:0})
line3d.points.push({x:116.4658603735841, y:39.914008304232816, z:0})
line3d.points.push({x:116.44564437859106, y:39.90302628980606, z:0})
//let linepts = new SuperMap3D.Point3Ds();
return line3d
}
第四步、我们创建实体
具体参数可参考下图
let entity = viewer.entities.add({
id:1,
parent: undefined,
show: true,
orientation: {
heading: SuperMap3D.Math.toRadians(0),
pitch: 0.0,
roll: 0.0
},
geometry: {
loftParam: {
line: line3d,
region: region,
buildParam: {
createTexCoord: true,
generateNormal: true,
group: true,
att: 3,
splitSegment: false, // 拆分成段
splitSide: false, //拆分侧面
chamferFactor: 0, //平滑参数
segmentClosed: true, //每段是否闭合
},
uvwParam: {
realTexMapSize:1, //是否为真实尺寸生成
mappingMode: 0,
uTiling: 1,
vTiling: 1,
}
},
material: material
}
})
最终我们得到的效果如下图