Skip to main content

Loading Geometry

Once you know how to load and visualize medical data, let's see another sethealth funcionality.

Sethealth's geometry module could be used to manage geometry models, for example, the ones that can be stored in a "stl" file. This module exposes a set of different APIs to load geometries.

The main API is geometry.loadFromSource(source: GeometrySource). Nowadays sethealth supports the "stl" format.

Loading from source#

Here's an example of how to load a stl file from a URL source:

import * as sethealth from "@sethealth/core";
const geometry = await sethealth.geometry.loadFromSource(
type: "stl",

Loading a local filesystem#

Sethealth includes a convenient API in order to load geometries from the local filesystem:

import * as sethealth from "@sethealth/core";
const geometries = await;

This API will show a file selection dialog that the user can use to import medical data from their local computer.

Unlike the loadFromSource() API, this API returns an array of geometries as you can select more than one "stl" file.


Since loading geometries from the local system is an extremelly common use case, sethealth also includes a component that handles the whole process.

Under the hood, <SetFileLoader/> uses the same APIs exposed in the geometry module but also provides an extra value by:

  • Showing a file selection dialog when clicked
  • Displaying a drag-and-drop area for users to load data easily
  • Display the correct progress bar while the data is being loaded.
<SetFileLoader type="geometry" workspace={myWorkspace}>
Drop your files here

As you can see in the example above, a type and an event handler is passed down.

The type specifies which kind of resource this component is intended to load. By default it's "med", however, this components can also be used to load other kind of assets:

Type values:#

  • "med": loading a medical files (dicoms, nifty, nrrd)
  • "geometry": 3d model files, such as the .stl format.
  • "files": any file, this component will load the file without trying to parse it.

Unlike when medical data is loaded, when type="geometry" is used we need to specify a workspace to work with. Without doing anything, these geometries loaded will be appended to the workspace.geometries array.


Once this component loads some geometries (after some user interaction), it emits the setGeometryLoad event, which includes the same array of goemetries as loadFromFilesystem().

import * as sethealth from "@sethealth/core";
private async onGeometryLoad(ev: CustomEvent<FileLoadDetail<Geometry>>) {
const geometries = ev.detail.items;