[C++知识库]three.js 加载IFC

three.js可以进行IFC文件的加载，需要更新three.js版本，或者下载ifcLoader组件。
常见问题：
1、three.js加载中FPS越高越好，进行优化
从30->60左右
通过在render中，进行stats.start()
stats.end()

//vue.js写的
    animate (){
    //通过此处可以优化FPS
      stats.begin()
      controls.update()
      this.renderer.render(scene, camera)
      stats.end()
      }
    render () {
      // for(let i = 0;i<1000000000;i++){
      //             //借助for循环多次执行延时
      // }
      requestAnimationFrame(this.render)
      const delta = clock.getDelta()
      timeStamp += delta
      if (mixer) {
        mixer.update(delta)
      }
      if (timeStamp > singleFrameTime) {
        this.animate()
        stats.update()
        // 剩余的时间合并进入下次的判断计算 这里使用取余数是因为 当页页面失去焦点又重新获得焦点的时候，delta数值会非常大， 这个时候就需要
        timeStamp = (timeStamp % singleFrameTime)
      }
      // if(skip !== 0) {
      //   skip = ++skip % 2
      //   return
      // } else {
      //   skip = ++skip % 2
      // }
    },

2、three.js加载ifc用到的web-ifc，涉及到对c++语言的编译，用到webassembly。首先需要确保浏览器支持webassembly。
可以通过[如何开启各浏览器的webassembly]，开启webassembly(https://iefreer.blog.csdn.net/article/details/56854272)
3、开启之后再浏览器的控制台进行测试，查看是否可以使用。
参照测试
主要测试代码：

WebAssembly.compile(new Uint8Array(`
  00 61 73 6d  0d 00 00 00  01 0c 02 60  02 7f 7f 01
  7f 60 01 7f  01 7f 03 03  02 00 01 07  10 02 03 61
  64 64 00 00  06 73 71 75  61 72 65 00  01 0a 13 02
  08 00 20 00  20 01 6a 0f  0b 08 00 20  00 20 00 6c
  0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16))
)).then(module => {
  const instance = new WebAssembly.Instance(module)
  const { add, square } = instance.exports
 
  console.log('2 + 4 =', add(2, 4))
  console.log('3^2 =', square(3))
  console.log('(2 + 5)^2 =', square(add(2 + 5)))
})

如果不报错则测试成功，可以进行接下来的操作，如果不成功请确保已经开启WebAssembly，或者开启后刷新浏览器或者重启浏览器再次测试。
4、引用ifcloader

import IfcLoader from 'three/examples/jsm/loaders/IFCLoader.js'
const ifcLoader = new IfcLoader()
            ifcLoader.ifcManager.setWasmPath( 'jsm/loaders/ifc/' );
            //url 是文件路径
            ifcLoader.load( url, function ( model ) {
            
            					console.log(wrapper)
                      group.add(model.mesh)
                      wrapper.add(group)
                      scene.add(model.mesh)
            
            } );

5、如果加载时出现报错，则可能是web-ifc.wasm没有正确加载。我采取的方法是，将web-ifc.wasm文件放在后台文件中，然后更改web-ifc-api中调用web-ifc.wasm文件的路径，即可成功加载ifc文件。具体在web-ifc-api中的位置：（注后来发现是路径位置没写对，不放在后台也行）

          function instantiateAsync() {
            if (!wasmBinary && typeof WebAssembly.instantiateStreaming === "function" && !isDataURI(wasmBinaryFile) && !isFileURI(wasmBinaryFile) && typeof fetch === "function") {
              return fetch('http://localhost:8089/think-admin/public/web-ifc.wasm',{ 
                credentials: "same-origin" 
              }).then(function(response) {

                var result = WebAssembly.instantiateStreaming(response, info);
                console.log(response.headers.get("content-type"),90909)
                return result.then(receiveInstantiatedSource, function(reason) {
                  err("wasm streaming compile failed: " + reason);
                  err("falling back to ArrayBuffer instantiation");
                  return instantiateArrayBuffer(receiveInstantiatedSource);
                });
              });
            } else {
              return instantiateArrayBuffer(receiveInstantiatedSource);
            }
          }

6、接下来想要通过在ifc.js上加载更多的功能。
基于C++的ifc解析扩展