How to build a BIM workspace in a web application.
Open a supported 3D model in Rasterex Canvas, surround it with the navigation and control surfaces your product needs, and connect selected model-part data to the project workflow your application already owns.
Rasterex technical guide
Canvas is the model workspace; your product is the BIM experience.
Rasterex provides the 3D model interaction layer and documented BIM tool commands. Your host application owns the model rail, grouped toolbar, quick controls, inspector, project context, access model and workflow records.
Begin with the Viewer SDK lifecycle and a Canvas-reachable supported 3D-model URL. Complete the embedded CAD viewer guide first if mounting and opening documents are not already implemented.
Separate host controls from confirmed Canvas state.
1. Model rail and workspace
The host selects and labels the 3D model; Canvas is the central working area after that model has opened successfully.
2. Selection inspector
Render selected-part name and properties only from the documented selection event; clear the inspector when the Canvas selection is cleared.
3. Confirmed controls
Keep requested and confirmed state separate. A toolbar control becomes active only after its 3D command reports success.
Select, inspect, confirm.
These are documented Viewer SDK calls. Adapt the host state and UI names to your product, but do not invent selected-part fields or assume a command has applied.
Enable part selection and populate the host inspector
01// Run after mount(), ready() and documents.open() succeed.02const stopPartSelected = viewer.tools.threeD.on("partSelected", (event) => {03 setSelectedPart({04 name: event.part?.name,05 properties: event.properties,06 });07});08 09const stopSelectionCleared = viewer.tools.threeD.on("selectionCleared", () => {10 setSelectedPart(null);11});12 13const result = await viewer.tools.threeD.setSelect({14 enabled: true,15 emitSelectionEvents: true,16});17 18if (!result.success) {19 throw new Error(result.error ?? "Could not enable part selection.");20}21 22// On screen cleanup: stopPartSelected(); stopSelectionCleared(); viewer.destroy();Reflect visual settings only after a successful 3D command
01// Update host UI state only when the SDK confirms the command succeeded.02const result = await viewer.tools.threeD.setExplode({03 enabled: distance > 0,04 distance,05});06 07if (result.success) {08 setVisuals((current) => ({ ...current, explodeDistance: distance }));09}10 11// The same confirmation pattern applies to other documented 3D actions:12await viewer.tools.threeD.setTransparency({ enabled: valuePercent > 0, valuePercent });13await viewer.tools.threeD.setCrossSection({ enabled: offset !== 0, x: offset, y: 0, z: 0 });14await viewer.tools.threeD.resetModel();Test the model workspace, not only the viewer load.
- A file selection does not enable BIM toolbar actions until its supported 3D model opens successfully.
- The model rail, grouped toolbar, quick controls, central workspace and inspector have clear host-side responsibilities.
- Selecting a model part populates the inspector with actual event name and properties, and clearing selection clears it.
- A failed 3D command retains the last confirmed quick-control value instead of showing an assumed new value.
- The Viewer remains the primary working area on small screens.
- Selection event subscriptions and the Viewer instance are cleaned up when the screen unmounts.
BIM workspace answers.
What does a web BIM workspace need around the viewer?
The documented React reference workspace separates the application shell, model rail, grouped toolbar, quick controls, Viewer host and selected-part inspector. Those are host application components around Rasterex Canvas.
How do I open a 3D model in the Rasterex Viewer SDK?
After mount and ready, call viewer.documents.open with a Canvas-reachable supported 3D model URL and a display name. Keep the BIM toolbar disabled until the model has opened successfully.
How do I show the selected BIM part in my application?
Enable part selection with viewer.tools.threeD.setSelect({ enabled: true, emitSelectionEvents: true }), then listen for partSelected. Render only the name and properties supplied by that event, and clear the inspector on selectionCleared.
When should I update BIM toolbar state?
Keep requested UI state separate from confirmed SDK state. Update the active mode or visual value only after the corresponding 3D command reports success; retain the last confirmed value when a command fails.
Connect selected model parts to the records your users work with.
Define what a selected model part means in your application—an issue, asset, task or approval context—then validate the mapping with the project models that matter in production.