最近在研究怎么导入bim模型，开始的时候真是一头雾水，毫无头绪，但是功夫不负有心人，终于找到了解决办法，总共找到了三种插件，其中两种是unity出品的，说明这个方向还是很有市场的，下面我就对这三种插件进行一下对比说明：
模型链接：/download/qq_39353597/84991982
最后总结：还是Threejs香：
<!DOCTYPE html><html lang="en"><head><title>three.js webgl - IFCLoader</title><meta charset="utf-8" /><metaname="viewport"content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><link type="text/css" rel="stylesheet" href="main.css" /></head><body><div id="info"><a href="" target="_blank" rel="noopener">three.js</a>-<a href="/standards/bsi-standards/industry-foundation-classes/" target="_blank" rel="noopener">IFCLoader</a></div><!-- Import maps polyfill --><!-- Remove this when import maps will be widely supported --><script async src="/es-module-shims@1.3.6/dist/es-module-shims.js"></script><script type="importmap">{"imports": {"three": "../build/three.module.js"}}</script><script type="module">import * as THREE from 'three';import {OrbitControls } from './jsm/controls/OrbitControls.js';import {IFCLoader } from './jsm/loaders/IFCLoader.js';let scene, camera, renderer;init();function init() {//Scenescene = new THREE.Scene();scene.background = new THREE.Color( 0x8cc7de );//Cameracamera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );camera.position.z = - 70;camera.position.y = 25;camera.position.x = 90;//Initial cubeconst geometry = new THREE.BoxGeometry();const material = new THREE.MeshPhongMaterial( {color: 0xffffff } );const cube = new THREE.Mesh( geometry, material );scene.add( cube );//Lightsconst directionalLight1 = new THREE.DirectionalLight( 0xffeeff, 0.8 );directionalLight1.position.set( 1, 1, 1 );scene.add( directionalLight1 );const directionalLight2 = new THREE.DirectionalLight( 0xffffff, 0.8 );directionalLight2.position.set( - 1, 0.5, - 1 );scene.add( directionalLight2 );const ambientLight = new THREE.AmbientLight( 0xffffee, 0.25 );scene.add( ambientLight );//Setup IFC Loaderconst ifcLoader = new IFCLoader();ifcLoader.ifcManager.setWasmPath( 'jsm/loaders/ifc/' );ifcLoader.load( 'models/ifc/rac_advanced_sample_project.ifc', function ( model ) {scene.add( model.mesh );render();} );const highlightMaterial = new THREE.MeshPhongMaterial( {color: 0xff00ff, depthTest: false, transparent: true, opacity: 0.3 } );function selectObject( event ) {if ( event.button != 0 ) return;const mouse = new THREE.Vector2();mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;const raycaster = new THREE.Raycaster();raycaster.setFromCamera( mouse, camera );const intersected = raycaster.intersectObjects( scene.children, false );if ( intersected.length ) {const found = intersected[ 0 ];const faceIndex = found.faceIndex;const geometry = found.object.geometry;const id = ifcLoader.ifcManager.getExpressId( geometry, faceIndex );const modelID = found.object.modelID;ifcLoader.ifcManager.createSubset( {modelID, ids: [ id ], scene, removePrevious: true, material: highlightMaterial } );const props = ifcLoader.ifcManager.getItemProperties( modelID, id, true );console.log( props );renderer.render( scene, camera );}}window.onpointerdown = selectObject;//Rendererrenderer = new THREE.WebGLRenderer( {antialias: true} );renderer.setSize( window.innerWidth, window.innerHeight );renderer.setPixelRatio( window.devicePixelRatio );document.body.appendChild( renderer.domElement );//Controlsconst controls = new OrbitControls( camera, renderer.domElement );controls.addEventListener( 'change', render );window.addEventListener( 'resize', onWindowResize );render();}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );render();}function render() {renderer.render( scene, camera );}</script></body></html>
