在maptalks中加载三维模型obj,fbx,glb

• maptalks 是一个基于WebGL的三维地图js库，基于maptalks可以快速建立web三维地图，加载各种地图数据，生成对应的图层，加载三维模型等。

•  地图加载。maptalks支持标准的地图数据类型，如GeoJson，TileServer等。

　　　　GeoJson格式是一种地理信息对象描述文件，可以是本地的，也可以存储在远程服务器上，其基本格式如下：

　　　　

{
"type": "FeatureCollection",
"name": "line0706",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 26, "OID": 26, "PID": "1JS2036-1JS2037", "Shape_Length": 215.78135367381537, "linegj": 400.0, "linecz": "球墨铸铁" }, "geometry": { "type": "LineString", "coordinates": [ [ 117.139587450494673, 31.980963606892612 ], [ 117.141572764515146, 31.980002698897021 ] ] } },
{ "type": "Feature", "properties": { "id": 27, "OID": 27, "PID": "1JS2037-1JS2038", "Shape_Length": 174.33523286131555, "linegj": 400.0, "linecz": "球墨铸铁" }, "geometry": { "type": "LineString", "coordinates": [ [ 117.141572764515146, 31.980002698897021 ], [ 117.143128167657636, 31.979157606398935 ] ] } },
{ "type": "Feature", "properties": { "id": 28, "OID": 28, "PID": "1JS2038-AJS2720", "Shape_Length": 74.157593232456321, "linegj": 400.0, "linecz": "球墨铸铁" }, "geometry": { "type": "LineString", "coordinates": [ [ 117.143128167657636, 31.979157606398935 ], [ 117.143830270406454, 31.978859076104776 ] ] } },
{ "type": "Feature", "properties": { "id": 29, "OID": 29, "PID": "1JS2039-DJS504", "Shape_Length": 116.76683212772929, "linegj": 400.0, "linecz": "球墨铸铁" }, "geometry": { "type": "LineString", "coordinates": [ [ 117.146490176708213, 31.977233403153686 ], [ 117.147518501281553, 31.9766498062083 ] ] } },
{ "type": "Feature", "properties": { "id": 30, "OID": 30, "PID": "1JS2040-1JS2041", "Shape_Length": 346.5596390599348, "linegj": 400.0, "linecz": "球墨铸铁" }, "geometry": { "type": "LineString", "coordinates": [ [ 117.148207019802612, 31.976299944711535 ], [ 117.151189187226777, 31.974481644858205 ] ] } }
]
}

　　

　　　　可以看出，geoJson格式是在Json数据格式的基础上增加了关于GIS的一些属性描述信息，

　　　　如type:Feature表示是一个地理对象，properties表示对象的属性值，geometry表示要描述的地理对象，

　　　　里面type:LineString表示类型是一个线段， coordinates 表示坐标，后面接着的数组表示一组坐标值，来表示起始点坐标位置。

　　

　　ArcGISTileLayer：

  　　　let ArcGIS_Layer = new maptalks.ArcGISTileLayer('line', {

      　　　　visible: true,

      　　　　urlTemplate: 'http://127.0.0.1:6080/server/rest/services/line/MapServer',

  　　　});

　　　　urlTemplate对应的值就是已经部署在ArcGIS服务器上的地图服务地址。

• 三维模型。基于maptalks 有一个使用threejs开发 maptalks.threeLayer 库，可以在maptalks中直接引用，在maptalks中加载三维模型，其实就是使用threejs加载三维模型。

　　　常用的三维模型有以下几种，obj，fbx，glb。使用同一个模型导出的三种文件格式大小如下图：

　　

　　从文件大小看，fbx和glb更有优势。

　　使用Windows自带的3D模型打开Wie

 　　obj模型一般情况下包含2-3个文件，obj,mtl,jpg(png), obj 为模型文件，mtl 和 jpg文件为材质文件，obj文件可以通过文本编辑器打开，可以看到里面指定了该obj文件对应的材质文件的名称。其余的是在三维空间中绘制的点位置。

　　　　

 　　需要使用材质的位置则指定使用mtl文件中的材质名称。

　　 　　

 　　在mtl文件中，则可以看到该材质的名称对应的参数

　　　　

　　fbx文件和glb为二进制编码后的文件，使用文本编辑器打开为乱码。

　　从可读性看，obj文件更占优势。

• 使用maptalks.threelayer 加载三维模型

　　　　threejs针对obj、fbx、glb三种格式的三维模型有专门的示例，针对threejs加载，可以在其官网 https://threejs.org/examples 查看，这里专门讲解maptalks 地图中的加载。

　　　　首先，threejs 提供了用于专门解析模型的 js 文件，　　

　　　　

　　　　需要注意的是:在使用的过程中，需要确认 maptalks.js, maptalks.threelayer.js, 与 OBJLoader.js，MTLLoader.js，FBXLoader.js，GLTFLoader.js所引用three.js 版本一致，否则会出现函数不兼容的情况，无法调用成功。

　　　　加载obj的方法为： 　　　　

 new THREE.MTLLoader(manager)
                .setPath('/js/symap/lib/maptalks/models/obj/ws/')
                .load('gs.mtl', function (materials) {

                    materials.preload();

                    new THREE.OBJLoader(manager)
                        .setMaterials(materials)
                        .setPath('/js/symap/lib/maptalks/models/obj/ws/')
                        .load('gs.obj', function (object) {

                            object.traverse(function (child) {
                                if (child instanceof THREE.Mesh) {
                                    child.scale.set(0.01, 0.01, 0.01);
                                    child.rotation.set(Math.PI * 1 / 2, Math.PI * 1 / 8, 0);
                                }
                            });

                            _this.getObject3d().add(object);

                            const z = layer.distanceToVector3(50, 50).x;
                            const position = layer.coordinateToVector3(
                                coordinate,
                                z
                            );

                            _this.getObject3d().position.copy(position);

                        });
                });

　　　　加载 fbx 的方法为：

var loader = new THREE.FBXLoader();
            loader.load('/js/symap/lib/maptalks/models/fbx/beng.fbx', function (object) {

                object.scale.set(0.002, 0.002, 0.002);
                object.rotation.set(-Math.PI * 1 / 2, -Math.PI * 1 / 2, 0);

                _this._mixer = new THREE.AnimationMixer(object);

                const action = _this._mixer.clipAction(object.animations[0]);

                if (title.indexOf("测试") > -1) { //速度不为0，显示运转
                    action.stop();
                } else {
                    action.play();
                }

                object.traverse(function (child) {

                    if (child.isMesh) {

                        if (child.name == "bengke") {

                            child.material.visible = false;

                        }

                        child.castShadow = true;
                        child.receiveShadow = true;

                    }

                });

                _this.getObject3d().add(object);

                const z = layer.distanceToVector3(150, 150).x;
                const position = layer.coordinateToVector3(
                    coordinate,
                    z
                );
                _this.getObject3d().position.copy(position);

            });

　　　　加载 glb 文件的方法为：

var gltfLoader = new THREE.GLTFLoader(manager);

            const dracoLoader = new THREE.DRACOLoader(manager);

            gltfLoader.setDRACOLoader(dracoLoader);

            gltfLoader.setPath('/js/symap/lib/maptalks/models/gltf/');
            gltfLoader.load('gssb.glb', function (gltf) {

                var object = gltf.scene;
                object.scale.set(0.3, 0.3, 0.3);
                _this.getObject3d().add(object);

                object.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {
                        //if (child.name == "bengke") {
                        //    child.material.visible = false;
                        //}
                        child.rotation.set(Math.PI * 1 / 2, 0, 0);
                        child.scale.set(0.1, 0.1, 0.1);
                    }
                });

                const z = layer.distanceToVector3(150, 150).x;
                const position = layer.coordinateToVector3(
                    coordinate,
                    z
                );

                _this.getObject3d().position.copy(position);

                _this._mixer = new THREE.AnimationMixer(object);
                var clip = gltf.animations[0];
                _this._mixer.clipAction(clip.optimize()).play();

            });

　　　　在glb的加载中，另外引用了一个 DRACOLoader.js 这是一个js库可以在模型加载的过程中对模型进行压缩。

　　　　踩坑记录：

　　　　在3D软件设计模型时，将模型放在(0,0,0)的位置，否则模型加载后不能出现在Scene中，或者不在代码设定的位置上。

　　　　另外对比同一开发环境下单个模型的加载方式对比: 支持   不支持  待测

格式	大小	多文件	可读性	加载速度	支持动画	运行压缩	预压缩	备注
Obj	17.36M			30ms
fbx	6.3M			21ms
glb	8.3			25ms

 

　　　　在此次测试中，从加载时间来看，fbx>glb>obj ,综合网络搜索结果，glb模型对其它三维GIS软件（Cesium，CityEngine）的兼容性更好，所以在本项目中使用glb格式的三维模型文件。

　　　　下图为在maptalks中加载的三维模型：

　　 　　

　　　　针对模型较大的问题，网上还有其它解决方法，比如DRACOLoader将模型压缩为drc文件进行加载；大模型拆分小模型然后分别压缩drc文件加载；精细模型减少内部结构，保留表面减少模型实际大小等，在开发中再进行测试。