3D Tools

Use viewer.tools.threeD to control Canvas 3D modes such as selection, walkthrough, hide parts, explode, transparency, cross section, and model reset.

3D tools are available after the viewer is mounted, Canvas is ready, and a 3D document is open.

• Most 3D commands require an active 3D document. Canvas will return success: false or error if the active document is not 3D.

import { createViewer } from "@rasterex/viewer";

const viewer = createViewer({
  container: "#viewer"
});

await viewer.mount();
await viewer.ready();

await viewer.documents.open({
  url: "https://files.example.com/model.ifc",
  displayName: "Model.ifc"
});

Supported 3D tools methods on the SDK:

• setBirdEyeView(options?): Triggers setBirdEyeView on Canvas.
• resetModel(options?): Restores the model to its default 3D state (reset3DModel).
• setSelect(options?): Enables 3D object part selection (set3DSelect).
• setMarkupSelect(options?): Enables markup selection mode (set3DMarkupSelect).
• setWalkthrough(options?): Activates walkthrough navigation mode (set3DWalkthrough).
• setHidePartsMode(options?): Enables click-to-hide part interaction (set3DHidePartsMode).
• setExplode(options?): Activates explode spacing mode (set3DExplode).
• setTransparency(options?): Configures model transparency depth (set3DTransparency).
• setCrossSection(options?): Renders custom model slice planes (set3DCrossSection).

// Reset model view
const result = await viewer.tools.threeD.resetModel();
console.log(result.success);

Each method accepts a shared config payload:

• If enabled is omitted on toggle commands, Canvas can toggle the active state automatically.

type ThreeDToolOptions = {
  enabled?: boolean;
  emitSelectionEvents?: boolean;
  distance?: number;
  valuePercent?: number;
  x?: number;
  y?: number;
  z?: number;
  requestId?: string;
  timeoutMs?: number;
};

Enable selection mode and subscribe to part selection events:

const stopPartSelected = viewer.tools.threeD.on("partSelected", (event) => {
  console.log("Part chosen:", event.part?.name, event.properties);
});

const stopSelectionCleared = viewer.tools.threeD.on("selectionCleared", (event) => {
  console.log("Selection cleared at:", event.clearedAt);
});

await viewer.tools.threeD.setSelect({
  enabled: true,
  emitSelectionEvents: true
});

// To unsubscribe:
stopPartSelected();
stopSelectionCleared();

Configure spatial separation and translucency depth values:

// Explode parts
await viewer.tools.threeD.setExplode({
  enabled: true,
  distance: 40
});

// Apply transparency
await viewer.tools.threeD.setTransparency({
  enabled: true,
  valuePercent: 40
});

Clip the active model along slice planes by setting X, Y, or Z vector coordinates:

await viewer.tools.threeD.setCrossSection({
  enabled: true,
  x: 0.25,
  y: 0,
  z: 0
});

Complete integration code setup for Vanilla HTML/JS environments:

<div id="viewer" style="height: 640px"></div>

<div>
  <button type="button" id="select-parts">Select Parts</button>
  <button type="button" id="explode">Explode</button>
  <button type="button" id="transparent">Transparency</button>
  <button type="button" id="reset-model">Reset</button>
</div>

<p id="status"></p>

Broker message mapping for 3D tools:

• viewer.tools.threeD.setBirdEyeView(...) maps to setBirdEyeView / setBirdEyeViewResult.
• viewer.tools.threeD.resetModel(...) maps to reset3DModel / reset3DModelResult.
• viewer.tools.threeD.setSelect(...) maps to set3DSelect / set3DSelectResult.
• viewer.tools.threeD.setMarkupSelect(...) maps to set3DMarkupSelect / set3DMarkupSelectResult.
• viewer.tools.threeD.setWalkthrough(...) maps to set3DWalkthrough / set3DWalkthroughResult.
• viewer.tools.threeD.setHidePartsMode(...) maps to set3DHidePartsMode / set3DHidePartsModeResult.
• viewer.tools.threeD.setExplode(...) maps to set3DExplode / set3DExplodeResult.
• viewer.tools.threeD.setTransparency(...) maps to set3DTransparency / set3DTransparencyResult.
• viewer.tools.threeD.setCrossSection(...) maps to set3DCrossSection / set3DCrossSectionResult.
• viewer.tools.threeD.on("partSelected", ...) listens to threeDPartSelected.
• viewer.tools.threeD.on("selectionCleared", ...) listens to threeDPartSelectionCleared.