# Loading ifc model with fiber

**URL:** <https://discourse.threejs.org/t/loading-ifc-model-with-fiber/64064>\
**Category:** Questions\
**Tags:** loaders, materials, geometry\
**Created:** [April 14, 2024, 8:45am UTC](https://discourse.threejs.org/t/loading-ifc-model-with-fiber/64064 "2024-04-14T08:45:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![amo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amo/32/45580_2.png) [@amo](https://discourse.threejs.org/u/amo)\
**Post date:** [April 14, 2024, 8:45am UTC](https://discourse.threejs.org/t/loading-ifc-model-with-fiber/64064/1 "2024-04-14T08:45:16Z")

</div>

Hello,  
I saw this code :[three.js webgl - IFCLoader](https://threejs.org/examples/webgl_loader_ifc.html) but what is the way to do the same with fiber ? Thank you.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [April 14, 2024, 3:09pm UTC](https://discourse.threejs.org/t/loading-ifc-model-with-fiber/64064/2 "2024-04-14T15:09:58Z")

</div>

you would do the same. everything you see in threejs works in fiber, you can use the loader code 1:1.

that example seems outdated btw, looks like [IFCLoader was deprecated](https://github.com/ThatOpen/web-ifc-three?tab=readme-ov-file) for this [GitHub - ThatOpen/engine\_components](https://github.com/ThatOpen/engine_components) the new api looks very confusing, downright puzzling but that’s a different matter.

---

<div class="post-metadata">

**Author:** ![amo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amo/32/45580_2.png) [@amo](https://discourse.threejs.org/u/amo)\
**Post date:** [April 14, 2024, 5:10pm UTC](https://discourse.threejs.org/t/loading-ifc-model-with-fiber/64064/3 "2024-04-14T17:10:01Z")

</div>

I actually did that:

> import {useLoader} from ‘@react-three/fiber’;  
> import { IFCLoader } from ‘web-ifc-three’;  
> import { IFCSPACE } from ‘web-ifc’;
> 
> import {useEffect,Suspense} from “react”
> 
> const Model = () =\> {
> 
> useEffect( ()=\>{  
> async function Kaka(){  
> const ifcLoader = new IFCLoader();  
> await ifcLoader.ifcManager.setWasmPath( ‘[web-ifc CDN by jsDelivr - A free, fast, and reliable Open Source CDN](https://cdn.jsdelivr.net/npm/web-ifc@0.0.36/)’, true );
> 
> await ifcLoader.ifcManager.parser.setupOptionalCategories( {  
> [IFCSPACE]: false,  
> } );
> 
> await ifcLoader.ifcManager.applyWebIfcConfig( {  
> USE\_FAST\_BOOLS: true  
> } );
> 
> ifcLoader.load( ‘./src/assets/rac\_advanced\_sample\_project.ifc’, function ( ) {  
> // scene.add( model.mesh );  
> // render();
> 
> } );  
> }
> 
> ```
> Kaka()
> 
> ```
> 
> },)
> 
> return (
> 
> ```
> <div>AA</div>
> </Suspense>
> 
> ```
> 
> );  
> };
> 
> export default Model

I have this error :

> RuntimeError: Aborted(LinkError: WebAssembly.instantiate(): Import #49 module=“a” function=“X”: function import requires a callable). Build with -sASSERTIONS for more info.

Do you know what’s wrong ? Thanks a lot.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [April 15, 2024, 7:52am UTC](https://discourse.threejs.org/t/loading-ifc-model-with-fiber/64064/4 "2024-04-15T07:52:51Z")

</div>

this is not about fiber in that case, the browser refuses to load their wasm.

other than that, when you get the wasm fixed, you can’t return a div, which would be the same as `new THREE.Div()` but such a thing does not exist. if you want to put a pre-existing object3d into the scene you would typically use [primitive](https://docs.pmnd.rs/react-three-fiber/api/objects#putting-already-existing-objects-into-the-scene-graph).

if you don’t want to use useLoader and suspense, then it’s just

```jsx
const [scene, setScene] = useState()
useEffect(() => {
  ...
  setScene(scene)
}, [])
return scene && <primitive object={scene} />
```