r3f加载IFC模型

合集 - three.js(6)

1.three.js中使用r3f在模型上打多处孔洞（模型相减）2022-10-202.r3f给物体不同的面设置不同的材质2022-11-083.记从polyhaven下载贴图文件应用到three.js的问题2023-11-21

4.r3f加载IFC模型2023-05-31

5.r3f喷雾火焰组件2023-05-296.three.js中某个物体跟随camera进行旋转2023-04-11

收起

import { IFCLoader } from "web-ifc-three";
import { IFCSPACE } from "web-ifc";
import { useRef } from "react";
import { useEffect } from "react";

async function init(group) {
  //Setup IFC Loader
  const ifcLoader = new IFCLoader();
  await ifcLoader.ifcManager.setWasmPath(
    "https://unpkg.com/web-ifc@0.0.36/",
    true
  );

  await ifcLoader.ifcManager.parser.setupOptionalCategories({
    [IFCSPACE]: false,
  });

  await ifcLoader.ifcManager.applyWebIfcConfig({
    USE_FAST_BOOLS: true,
  });

  ifcLoader.load("ifc/rac_advanced_sample_project.ifc", function (model) {
    console.log("model", model);
    group.add(model)
  });
}

function IfcTestModel() {
  const group = useRef();
  useEffect(()=>{
    group.current.clear();
    init(group.current)
  },[])

  return <group ref={group}></group>;
}

export default IfcTestModel;