CFF Viewer

The CFF Viewer library is a powerful toolkit for building web-based 3D applications tailored to dental workflows. It provides a collection of React components to create customizable and interactive 3D viewers.

CFF Viewer deployment

Purpose

The CFF Viewer library is designed to:

• Enable product teams to visualize and share results of their experiments.
• Provide a reusable package for developing new 3D visualization applications.
• Support flexible, fast, and high-quality data annotation workflows.

Features

The CFF Viewer offers:

• Support for a variety of file formats, including STL, DICOM, and more.
• Tools for visualization, interaction, and data analysis.
• Customizable layouts and functionality, with the ability to extend using react-three-fiber components.

It supports viewing multiple file types in a single scene or in isolation. For example, you can inspect the cross-section of meshes alongside corresponding image data, with the outline of the mesh displayed at the current image plane position.

To learn more about using the components in your project, check the documentation on .

Note: To contribute to the development of the CFF Viewer, please refer to the contribution guidelines.

Example

Here’s a simple implementation of the CFF Viewer in a React app:

import { Viewer } from "@promaton/cff-viewer";

const App = () => {
  return (
    <Viewer
      preset="quadrants"
      objects={{
        "Object 1": { url: "..." },
        "Object 2": { url: "..." },
      }}
    />
  );
};

For more examples, check the stories folder.

Development

Setup Token

This repository uses a private NPM registry. Follow the instructions here to set up your NPM token.

Install Dependencies

Install dependencies using PNPM:

pnpm install

Start the Dev Environment

Run the following command to start the Storybook development environment:

pnpm dev

API Highlights

<Viewer />

The main component for the CFF Viewer. Key props include:

Prop	Description
objects	A map of objects to display in the viewer.
preset	Layout presets like single, quadrants, or multiple.
sceneExtension	Add custom react-three-fiber components to the 3D scene.
config	Flags to enable/disable functionality.
theme	Custom Material-UI theme for styling.

<Viewport />

Defines individual viewports within the viewer. Supports both perspective and orthographic views.

<LayerList />

Displays a list of objects in the viewer, allowing toggling visibility and selection.

<ViewerToolbar />

Provides tools like measurement and transformation widgets. Extendable with custom buttons.

Utilities and Hooks

• takeScreenshot: Capture a screenshot of the current viewer state.
• useShortcut: Register custom keyboard shortcuts.
• useViewerContext: Access the current viewer scene context.

For a complete list of utilities, hooks, and reusable components, refer to the documentation.