Loading ifc model with fiber

Questions
, ,
1

Hello,
I saw this code :three.js webgl - IFCLoader but what is the way to do the same with fiber ? Thank you.

2

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 for this GitHub - ThatOpen/engine_components the new api looks very confusing, downright puzzling but that’s a different matter.

3

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’, 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.

4

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.

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

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