基于 iClient for Webgl 创建带贴图放样模型

目录

第一步、创建贴图

第二步、实例化需要放样的截面

第三步、构建放样范围

第四步、我们创建实体

最终我们得到的效果如下图

---

作者：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
						}
					})

最终我们得到的效果如下图