如何在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 】，第一时间获取最新文章

以上就是关于如何在Web上直接浏览大规模OSGB格式倾斜模型（二）：转换OSGB全部的内容，包括:如何在Web上直接浏览大规模OSGB格式倾斜模型（二）：转换OSGB、、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！