Examples

These examples demonstrate how to build a comprehensive web application featuring an interactive 3D scene using MTK Web. Specifically, they illustrate the process of reading 3D models and utilizing the derived data for model visualization within a 3D environment. For constructing the 3D scene, rendering objects, and enabling user interactions, Three.js is employed. However, you are free to choose an alternative 3D visualization library for your project by applying similar design principles.

Installation and Running

1. Download the archive from provided link and extract it to your local machine.
2. Read README.md file for verifying needed requirements and running tips.
3. Open a terminal in the project root directory.
4. Install the dependencies by running npm install.
5. Start the project with one of the available commands, e.g. npm run dev:react. You can find the complete list of available terminal commands in the scripts section of the package.json file.
6. When the main page loads in your browser, you will see a set of clickable cards representing each individual example for further exploration.

Structure and Architecture

The project is organized into three top-level directories:

• shared: Contains core reusable logic and utilities for some common functionalities, reading and explore 3D models, initializing and interacting with 3d scene and visualized model.
• react: Contains a UI components and hooks that demonstrate how to utilize the logic described in the shared folder within a React application.
• server: Provides a lightweight backend implementation for handling API requests and data processing for some specific examples.

Available examples

Base Model Viewer Example	Demonstrates how to integrate a basic interactive 3D scene into a web application, including loading and displaying a 3D model.
Model Structure Viewer Example	Demonstrates how to display a model's structure in a tree view UI, enabling visibility toggling, selection, and synchronized interaction with the 3D scene.
Model Explorer Viewer Example	Demonstrates how to display additional information about a selected model element, extending the functionality of the Model Structure Viewer
Selection Handling Viewer Example	Demonstrates how to handle user selections of model elements and BRep shapes (e.g., faces, edges), and process the selected entities.
Measurement Creating Viewer Example	Demonstrates how to perform measurements on a 3D model and display results in the 3D scene.
MTK Explorer	Demonstrates a full client-server application using MTKConverter on the server to analyze models and visualize the results on the client side, both in the UI and the 3D scene.