Containers and loading your digital twin

One of the first problems you'll bump into is how to load your project or archive. By leveraging loading options and geometry loaders, you gain complete control over what is loaded, when, and how it's displayed on the initial render.

Loading a container

The example below creates the BimAPI, picks the container you want, and then loads exactly the geometry you need — configuring the scene before anything is rendered.

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. This stops 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's 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 powerful 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);
        });
}

Why this approach helps

Using this approach you'll be able to:

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