使用ThreeJs搭建BIM模型浏览器 IFC篇

前面提到的模型浏览器所浏览的文件，都是基于自己对Revit文件的进行解析，所导出的蹭文件是JSON结构的。有朋友 提到可否浏览IFC文件呢？

小作尝试确认是可以的。但是IFC存在非常大的问题：

第一，没有模型结构树。

第二，没有构件属性信息，只有几何信息。

我把IFC上传到广联达的平台上也是一样的，没属性没模型目录，除了看个外观，没其他鸟用。

 

技术路线分享一下吧。：

第1步，从Revit导出IFC。它自带有导出IFC的菜单，如果要通过代码实现，也很简单。

 IFCExportOptions ifcOptions = new IFCExportOptions();
                ifcOptions .FileVersion = IFCVersion.IFC2x3;
                ICollection<ElementId> views = new List<ElementId>();
                views.Add(view.Id);
                document.Export(Path.GetDirectoryName(document.PathName), Path.GetFileNameWithoutExtension(document.PathName),
                     dwgOptions);

第二步，把IFC转成OBJ+MTL文件。这技术不是我的，我不公开发布。

第三步，参考官方示例，加载OBJ+MTL文件。好吧，这颜色跟我们自定义的JSON并无差别，而且IFC文件或者OBJ文件，远比自定义的JSON要大许多。就像前面文章说到的，自定义可以随便导出自己想到的属性和数据，按自己的业务表组织结构。

核心代码：

//             var model = mtl的文件名
            var onProgress = function ( xhr ) {
					if ( xhr.lengthComputable ) {
                        var percentComplete = xhr.loaded / xhr.total * 100;
                        progressLoad.value = percentComplete;
						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
					}
                };
                var onError = function () { };
				THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
				new THREE.MTLLoader()
					//.setPath( '' )
					.load( model+'.mtl', function ( materials ) {
						materials.preload();
						new THREE.OBJLoader()
							.setMaterials( materials )
							//.setPath( 'models/obj/male02/' )
							.load( model+'.obj', function ( object ) {
								object.position.y = - 95;
                                _this.scene.add( object );
                                resolve('1');
							}, onProgress, onError );
					} );