Example 3 - Viewport Orientations

This example demonstrates different view types and orientation controls.

Reference: Example 3 - Viewport Orientations

Key Features

• Combined PerspectiveView and OrthographicView
• Orthographic slice view with axis control
• Orientation switching capability between:
  • Axial (ViewOrientation.AXI)
  • Sagittal (ViewOrientation.SAG)
  • Coronal (ViewOrientation.COR)
• Recenter button in slice control
• Plane clipping for 3D models

Code Example

Below is an example implementation:

import { Stack } from "@mui/system";

import { PlySample } from "../../data/scans";
import { ViewOrientation } from "../../stores/useViews";
import { Viewport } from "../../ui/Viewport";
import { Viewer } from "../../Viewer";
import { OrthographicView } from "../../views/OrthographicView";
import { PerspectiveView } from "../../views/PerspectiveView";

// Use a relative path string instead of importing the file content
const factoryPath = PlySample["FACTORY"].url;

function App() {
  return (
    <Viewer
      sx={{
        background: "transparent",
        position: "absolute",
        inset: 0,
        zIndex: 0,
      }}
      objects={{
        example: {
          clipToPlanes: true,
          url: factoryPath,
        },
      }}
    >
      <Stack sx={{ width: "100%", height: "100%", flexDirection: "row" }}>
        <Viewport
          allowOrientationSwitch
          props={{}}
          name={"3d"}
          component={PerspectiveView}
        />
        <Viewport
          showRecenterButtonInSliceControl
          props={{
            axis: ViewOrientation.AXI,
            clearColor: "#000000",
          }}
          name={"slice"}
          component={OrthographicView}
        />
      </Stack>
    </Viewer>
  );
}

export default App;

This example showcases how to integrate multiple viewports with orientation controls and interactive features.