Overview
The 3D Viewer is SysHub's interactive WebGL-based model explorer. It renders the processed STEP assembly as a 3D model and provides tools to inspect, annotate, and organise parts. The viewer always runs in dark mode for optimal contrast.
Opening the Viewer
There are several ways to open the viewer:
- Click Open in Viewer on a product card (Projects tab) — opens the current version.
- Click Open in Viewer in the product detail header — opens the current version.
- Click View this version in the Versions tab — opens a specific historical version.
The viewer URL is /projects/:projectId/products/:productId/viewer (current version) or /projects/:projectId/products/:productId/versions/:versionId/viewer (specific version).
Viewer Layout
On desktop, the viewer has three resizable panels:
| Panel | Location | Contents |
|---|---|---|
| Assembly Tree | Left sidebar | Hierarchical list of all parts; groups and classes tabs |
| 3D Canvas | Centre | Interactive 3D model; toolbar at the top |
| Part Info Panel | Right sidebar | Details for the selected part, class, group, or interface |
Drag the dividers between panels to resize them. The left sidebar can be collapsed by clicking the collapse arrow.
On mobile, the panels are stacked vertically and accessed via tabs at the bottom of the screen.
3D Navigation
| Action | Mouse / Touch |
|---|---|
| Rotate | Left-click drag (mouse) / One-finger drag (touch) |
| Pan | Right-click drag / Two-finger drag |
| Zoom | Scroll wheel / Pinch gesture |
| Focus on selection | Click Focus button in toolbar, or press F |
| Reset view | Click Fit All / Home button in toolbar |
Assembly Tree
The left panel shows the Assembly Tree — a hierarchical list of all parts and sub-assemblies in the model. The tree has three tabs:
| Tab | Contents |
|---|---|
| Parts | The full assembly hierarchy from the STEP file |
| Groups | Custom part groups you have created |
| Classes | Project classes and the parts assigned to each |
Navigating the tree
- Click the chevron next to a node to expand or collapse its children.
- Click a part name to select it (highlights in the 3D view and opens the Part Info panel).
- Hover over a part name to highlight it in the 3D view without selecting.
- Use the search / filter field at the top of the tree to find parts by name.
Multi-select
Hold Ctrl (or Cmd on Mac) and click multiple parts in the tree to build a selection set. The selected parts are highlighted together in the 3D view.
Visibility Controls
Each part row in the tree has an eye icon to toggle its visibility in the 3D view.
- Click the eye icon on a part to hide or show it.
- Click the eye icon on a parent node to hide/show the entire sub-assembly.
- Use Show All / Hide All buttons at the top of the tree to toggle all parts at once.
Selecting Parts
Parts can be selected from the tree or directly in the 3D canvas:
- Click a part in the canvas to select it. The part highlights and the Part Info panel opens.
- Click empty space in the canvas to deselect.
- Ctrl+click (or Cmd+click) in the canvas to add parts to the selection set.
- The selected part is also highlighted in the Assembly Tree (the tree auto-scrolls to it).
Solo Mode
Solo mode isolates a part or group, hiding everything else so you can focus on it.
- Right-click a part in the tree and choose Solo, or click the solo icon on the part row.
- To solo a group, click the solo icon on the group row in the Groups tab.
- Click Exit Solo (or click the solo icon again) to restore all visibility.
Part Info Panel
When you select a part, the Part Info panel (right sidebar) shows detailed information and actions for that part.
| Section | Contents |
|---|---|
| Part name | The part's name from the STEP file |
| Tasks | Tasks linked to this part; add new tasks directly here |
| Files | Files attached to this part |
| Links | External links for this part |
| Notes | Free-text notes for this part |
| Class assignment | Which project class this part belongs to, and its field values |
| Group membership | Which groups this part belongs to |
| Collaborators | Part-level collaborators (owners only) |
When a class or group is selected (from the tree tabs), the Part Info panel shows the class or group details instead of a single part.
Render Modes
The toolbar at the top of the 3D canvas has a Render Mode selector:
| Mode | Description |
|---|---|
| Solid | Default opaque rendering |
| Transparent | All parts rendered semi-transparent. Use the opacity slider to adjust transparency level. |
| Wireframe | Shows only the edges of each part |
Explode View
Explode view separates all parts outward from the assembly centre, making it easy to see how components fit together.
- Click the Explode button in the toolbar (or the explode icon).
- Use the Explode Factor slider to control how far apart the parts spread.
- Click Explode again (or toggle the button) to return to the assembled view.
Cross-Section
The cross-section tool cuts the model with a plane so you can see the interior.
- Click the Cross-Section button in the toolbar.
- A cutting plane appears. Use the axis controls to move and orient the plane.
- Click Cross-Section again to remove the cutting plane.
Groups
Groups are custom collections of parts you define to organise related components (e.g. "Fasteners", "Electrical", "Hydraulic system"). Groups are stored per-product and are visible in the Groups tab of the assembly tree and in the Product Detail Groups tab.
Creating a group
- Select one or more parts in the tree or canvas (use Ctrl+click for multi-select).
- In the tree toolbar, click Create Group (or right-click the selection and choose Add to new group).
- Enter a group name and optional description.
- Click Save. The group appears in the Groups tab.
Adding parts to an existing group
- Select the parts you want to add.
- Right-click and choose Add to group, then select the target group.
Editing & deleting groups
- Click a group in the Groups tab to select it. The Part Info panel shows group details with edit and delete options.
- Click Edit to rename the group or change its description.
- Click Delete to remove the group (parts are not deleted, only the grouping).
Classes
Classes are project-level templates (defined in the Project Detail → Classes tab) that can be assigned to individual parts. When a class is assigned to a part, the part inherits the class's fields and you can fill in values for each field.
Assigning a class to a part
- Select a part in the viewer.
- In the Part Info panel, find the Class section.
- Click Assign class and choose a class from the project's class list.
- Fill in the field values for the assigned class.
- Click Save.
Viewing class assignments
Switch to the Classes tab in the assembly tree to see all parts grouped by their assigned class. Click a class to highlight all its parts in the 3D view.
Interface Diagram
The Interface Diagram is an alternative view mode that shows a schematic diagram of connections (interfaces) between parts, organised by class or group scope.
Switching to diagram view
- In the viewer toolbar, click the Diagram view mode button (next to the 3D button).
- The canvas switches from the 3D model to the interface diagram. The 3D model remains loaded in the background.
Reading the diagram
- Each node in the diagram represents a part.
- Each edge (line) represents an interface (connection) between two parts.
- Nodes are colour-coded by their class or group.
- Click a node to select the corresponding part (also highlights it in the tree).
- Click an edge to open the interface detail in the Part Info panel.
Creating an interface
- In diagram view, hover over a part node until the connection handle appears.
- Drag from the handle to another part node to create a connection.
- A dialog opens — enter an interface title and optional description.
- Click Save. The interface edge appears in the diagram.
Editing & deleting interfaces
- Click an interface edge to select it. The Part Info panel shows the interface details.
- Click Edit to change the title or description.
- Click Delete to remove the interface.
Mobile Viewer
On mobile devices, the viewer adapts to a single-panel layout:
- The 3D canvas fills the screen.
- A bottom tab bar lets you switch between the canvas, assembly tree, and part info panel.
- The toolbar controls (explode, cross-section, render mode, focus) are accessible via a compact toolbar at the top of the canvas.
- Touch gestures are used for navigation (one-finger rotate, two-finger pan, pinch zoom).