如何在Web上直接浏览大规模OSGB格式倾斜模型（二）：转换OSGB

欢迎关注公号 三维网格3D ，第一时间获取最新文章

上一篇（ 如何在Web上直接浏览大规模OSGB格式倾斜模型（一）：解析OSGB ）已经贴出了解析结果，让我们对OSGB倾斜模型文件内部结构有了比较清晰的认识，本篇我们将解析结果转成threejs对象，并实现单个模型的显示。

为什么转成threejs对象

从解析结果看，Osg对象的节点关系用threejs对象表达更容易，转换结果可以直接用threejs显示，通过我们团队的Cesium和threejs融合方案，可以轻松将成果用于Cesium开发的项目，既可以单独使用，又可以拥有GIS能力。

需要转换的Osg类型

解析得到的Osg对象，Type属性指示对象的类型，我们只是要转换倾斜摄影模型文件的Osg对象，而不是做一个通用的转换工具，所以先将类型做一下分类，只转换目前所用测试数据（100多G的测试数据）已知的类型。

PS:我们团队内部使用的版本，经过一年多的应用和改进，支持了更多类型的转换，填了许多坑，而且支持osgb、osgt、osg、osgjs四种格式文件，加载速度和健壮性都得到保障。欢迎咨询~

节点类

osg::Node

osg::Geode

osg::Group

osg::LOD

osg::PagedLOD

osg::MatrixTransform

几何类

osg::Geometry

osg::OsgArray

材质类

osg::StateSet

osg::Material

osg::StateAttribute

osg::Texture

osg::Texture2D

osg::Image

节点类主要考虑osg::MatrixTransform，因为这个节点主要的信息就是变换参数，会影响模型的位置、旋转、缩放等。

接下来我们着重介绍转换几何和材质这两类，LOD和PagedLOD参数不多，而且都是调度相关的，我们放在下一篇一起介绍。

转换几何对象

几何数据存储在Osg::Geometry，包含索引属性PrimitiveSetList、位置坐标属性VertexArray、纹理坐标属性TexCoordArray。我们将其转换为THREEBufferGeometry。

varbufferGeometry=newTHREEBufferGeometry();

顶点属性转换

顶点属性值是一个二维数组，我们直接调用flat方法，转为一维数组即可。

varpositions=newFloat32Array(osgGeometryVertexArrayflat());

varuvs=newFloat32Array(osgGeometryTexCoordArrayflat());

bufferGeometrysetAttribute('position',newTHREEBufferAttribute(positions,3));

bufferGeometrysetAttribute('uv',newTHREEBufferAttribute(uvs,2));

索引转换

索引类型有两种，有value指定，这里我们只对索引类型为4的情况（即绘图最小单元为四边形）进行特殊处理，其余的默认最小绘制单元为三角形。

varprimitiveSet=osgGeometryPrimitiveSetList[0]

varindices=primitiveSetdata;

if(primitiveSetvalue==4) {

letnewIndices=[];

for(leti=0; i<indiceslength; i+=4) {

leti0=indices[i],

i1=indices[i+1],

i2=indices[i+2],

i3=indices[i+3];

newIndicespush(

i0, i1, i3,

i1, i2, i3

);

}

indices=newIndices;

}

bufferGeometrysetIndex(indices);

转换材质对象

倾斜摄影模型的材质最重要的就是贴图，作为原理介绍，我们不处理其他材质参数，直取贴图即可，当然工程应用上我们还是需要处理一些情况，保证其可用、可靠、健壮。

材质对象存储在Osg::Geometry的StateSet属性，该属性类型为Osg::StateSet，而我们要的贴图存储在Osg::StateSet的TextureAttributeList属性，一般就一张图。

倾斜模型已经包含了光影信息，为此我们将材质转为THREEMeshBasicMaterial。

varmaterial=newTHREEMeshBasicMaterial({

side:THREEDoubleSide

});

处理贴图

贴图一般是jpg或者png格式，我们这里只处理这两种格式。需要注意的是数据为Uint8Array类型，我们需要先转为Blob，然后通过URLcreateObjectURL创建url，最后使用THREETextureLoader加载。

varosgStateSet=osgGeometryStateSet;

varosgImage=osgStateSetTextureAttributeList[0]valueStateAttributeImage

varfileName=osgImageName;

constisJPEG=fileNamesearch(/\jpeg($|\)/i)>0

constisPNG=fileNamesearch(/\png($|\)/i)>0

if(!isPNG&&!isJPEG)return;

varmimeType=isPNG'image/png':'image/jpeg';

varimageUri=newBlob([osgImageData], { type:mimeType });

imageUri=URLcreateObjectURL(imageUri)

vartexture=newTHREETextureLoader()load(imageUri, ()=>{

textureneedsUpdate=true

})

创建网格

最后，使用转换好的几何体和材质创建模型网格。这里要注意，倾斜摄影模型是z轴朝上(z-up)，而threejs渲染是y轴朝上（y-up），所以还需将网格绕x轴旋转y-90°才得到正常的渲染效果。

varmesh=newTHREEMesh(geometry, material);

meshrotationx=-MathPI/2

转换结果

显示效果

额，看起来并没有那么好看~毕竟这是单个瓦片最不清晰的那层，简化到不能看了。

下一篇，我们将主要介绍如果实现PagedLOD，来加载大规模倾斜摄影模型，敬请期待

欢迎关注公号 三维网格3D ，第一时间获取最新文章

STL文件转换为OBJ文件主要有两种方法比较方便，第一种是使用在线转换器。第二种就是使用CAD程序。
STL文件格式已成为全世界CAD/CAM系统接口文件格式的工业标准，是3D打印机支持的最常见的文件格式。STL文件有两种：一种是ASCII文本格式，特点是可读性好，可直接阅读。另一种是二进制格式，占用磁盘空间小，为ASCII文本格式的1/6左右，可读性差。但无论是ASCII文本格式，还是二进制格式，STL文件格式都非常简单，一目了然，易于生成及分割、算法简单等特点，另外输出精度也能够很方便地控制。OBJ文件是一套基于工作站的3D建模和动画软件”AdvancedVisualizer”开发的一种标准3D模型文件格式。很适合用于3D软件模型之间的数据交换，比如你在3dsMax或LightWave中建了一个模型，想把它调到Maya里面渲染或动画，导出OBJ文件就是一种很好的选择，OBJ主要支持多边形模型。由于OBJ格式在数据交换方面的便捷性，目前大多数的三维CAD软件都支持OBJ格式，大多数3D打印机也支持使用OBJ格式进行打印，OBJ文件比较灵活，可以使用不同的多边形以及自由曲线。OBJ文件还可以存储颜色和纹理，这使其成为多色3D打印的理想选择。
STL文件转换为OBJ文件主要有两种方法比较方便，第一种是使用在线转换器。第二种就是使用CAD程序。

大疆智图二维重建成果包含：大疆智图界面中显示的地图瓦片、正射影像和数字表面模型（默认采用行业通用的基于 UTM 投影的 GeoTiff 格式）。
二维多光谱重建成果包含：大疆智图界面中显示的地图瓦片、正射影像和数字表面模型、单波段拼接图、NDVI/GNDVI等5项植被指数图；
三维重建成果包含：多细节层次模型（支持 osgb、b3dm和 s3mb 格式）、单一的纹理模型（ply 和 obj 格式）、点云（pnts、las和s3mb 格式）和空三（xml和Terra格式）。

---