I’m working on a SharePoint Framework (SPFx) web part where I need to render .ifc files for a project. I’ve decided to use the web-ifc-viewer library for this purpose, but I’m facing some challenges in integrating it with my SPFx solution.

import * as React from 'react';
import * as THREE from 'three';
import { IFCLoader } from 'web-ifc-three';

export default class ThreeJsComponent extends React.Component<any> {
  private renderer: THREE.WebGLRenderer | null = null;
  private scene: THREE.Scene | null = null;
  private camera: THREE.PerspectiveCamera | null = null;
  private loader: IFCLoader | null = null;

  public componentDidMount(): void {
    this.initThreeJs();
    this.loadIfcModel();
    this.animate();
  }

  private initThreeJs(): void {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.camera.position.z = 5;

    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);

    const container = document.getElementById('threeJsContainer');
    if (container && this.renderer) {
      container.appendChild(this.renderer.domElement);
    }

    this.loader = new IFCLoader();
  }

  private loadIfcModel(): void {
    if (!this.loader || !this.scene) return;

    // URL of the IFC file
    const url = 'https://dgneaseteq.sharepoint.com/:u:/s/ZellerHRMS/EVMqnoMFRRtOnpgaLPSYtHQBuUy7KD_9mwEVmJ7ozCa-GA?e=fHQztx.ifc';

    // Load the IFC model
    this.loader.load(url, (model) => {
      this.scene?.add(model);
      console.log('IFC model loaded', model);
    }, undefined, (error) => {
      console.error('An error happened while loading the IFC model:', error);
    });
  }

  private animate = (): void => {
    requestAnimationFrame(this.animate);

    if (this.renderer && this.scene && this.camera) {
      this.renderer.render(this.scene, this.camera);
    }
  };

  public render(): React.ReactElement<{}> {
    return (
      <div style={{ width: '100%', height: '500px' }}>
        <div id="threeJsContainer" style={{ width: '100%', height: '100%' }} />
      </div>
    );
  }
}

Im able to compile it but im unable to run it im getting runtime error.Can any help me with getting the .ifc file in spfx webpart.