Containers and loading your digital twin

One of the first problems you will bump into is how to load your project or archive. By leveraging loading options and geomtry loaders we can gain complete control of what is loaded, when and how it is displayed on initial render.


async function main(): Promise<void> {
    // Create the BimAPI and collect containers. The containers are your
    // projects and archives.
    const api = await getApi();
    const containers = await api.backend.getContainers();

    // Find the digital twin container that you want to work with
    let helloTwinfinityWorld = containers.find(
        (c) => c.name.toLocaleLowerCase() === 'hellotwinfinityworld'
      );

    // Set the container but skip loading the geometries of the IFC files,
    // we load exactly what we want later.    
    await api.setContainer(helloTwinfinityWorld!, 'skip-ifc-load');

    // Collect the files and add the ones you are interested in.
    const files = (await api.backend.getIfcChanges(helloTwinfinityWorld!));
    await api.ifc.add(files);
    
    // We must update the environment to get everything properly 
    // initiated.
      api.viewer.addOrUpdateEnvironment({
        boundingInfo: api.ifc.regionBoundingInfo,
    });

    // Now we can set up how we want our scene to look before anything is
    // rendered. Which will stop the initial setup being visible to the user
    // resulting in an overall much nicer experience.

    //Let’s make some scene configuration just to highlight the example
    api.viewer.camera.zoomToExtent(api.ifc.regionBoundingInfo, "top");
    api.viewer.camera.options.isRotationEnabled = false;
    api.viewer.grid.isEnabled = true;

    // and hide some objects to show that it is possible.
    api.ifc.spaces.forEach(o=>o.visible(false));

    // Now it is time to build the geometry. We do this using the geometry
    // builder. You can add filters here to control exactly what is loaded
    // which, if used properly, is a powerfull way to improve performance.
    // If you filter things here they will not be loaded at all.

    //example 1: api.ifc.geometryBuilder(o => o.ifc.discipline.short === 'A');
    //example 2: api.ifc.geometryBuilder(o => !(o instanceof BimIfcSpace));
    const geometryBuilder = await api.ifc.geometryBuilder();
    const geometries = await geometryBuilder.build(
        ({ geometry, progress, totalIndiceCount, processedIndiceCount }) => {
            api.viewer.addOrReplaceMesh(geometry);
            // You can monitor the loading progress here which is nice
            // for UI elements.
            console.log(progress);
        });
}

Using this approach you will be able to:

Improve performance by loading only what is needed for your application or site
Set the initial options like post processes, cameras, filtering and more before the scene starts rendering allowing for a much improved user experience.
Monitor the geometry loading progress.