Tutorial Index

This page orders the xeokit SDK tutorials as a learning path. Start with data conversion and viewing, then move into interaction, streaming and SceneModel authoring.


Use this section to choose the right conversion entry point. xeoconvert is the command-line file format converter for shell, CI and asset-pipeline work; ModelConverter is the same loader/exporter pipeline driven directly from TypeScript or JavaScript.

  1. Build a Minimal xeokit Viewer viewer-basics.md Create a browser viewer with a scene, renderer, view, camera, navigation and one loaded XGF model.

  2. Convert IFC to XGF and View It with xeokit V3 ifc-to-xgf.md Convert an IFC file to XGF assets and load the result in a viewer.

  3. Convert IFC to XGF and DataModel JSON with Loaders and Exporters ifc-to-xgf-with-loaders-exporters.md Use SDK loaders and exporters to produce both visual XGF data and semantic DataModel JSON.

  4. Use the xeoconvert CLI xeoconvert-cli.md Convert, inspect, repair and report on model assets from a terminal or CI pipeline.

  5. Use ModelConverter Programmatically modelconverter.md Configure loaders, exporters and pipelines from TypeScript and handle converted output data in code.

  6. Load and Export GeoJSON Site Data geojson-site-plan.md Load GeoJSON feature geometry, preserve feature properties, label areas and export compatible scene content back to GeoJSON.

  7. Load a glTF Model with Realistic Rendering gltf-realistic-house-plan.md Load a glTF house-plan model and configure lighting, materials, tone mapping and environment maps for realistic presentation.

  8. Fast Rendering for Many Objects fast-rendering-many-objects.md Configure loading, model construction and view settings for high interactivity with many objects.


  1. Select, Hide and Style Objects in a View view-object-state.md Control per-view style-bin membership, visibility, colorization, opacity and reset behavior.

  2. Picking and Snapping with xeokit SDK picking-and-snapping.md Perform object, mesh, vertex and edge picking with BVH and renderer-backed strategies.

  3. Create and Stream an XGF Dataset xgf-streaming-dataset.md Create a streamed XGF dataset and load it with frustum-prioritized streaming and model navigation.

  4. View a Model in Two Views two-views.md Display one loaded model in two independent views with shared scene content and separate view state.

  5. Camera Navigation Modes camera-navigation-modes.md Choose orbit, first-person, plan-view, walk and programmatic camera motion patterns for viewer workflows.

  6. Load Federated SceneModels load-federated-scenemodels.md Load multiple XGF/DataModel JSON pairs into one viewer as a federated project.


  1. Programmatically Author and View a SceneModel author-scenemodel.md Create a simple authored model with geometry, meshes, objects, a viewer and view state.

  2. SceneModel Authoring with Batches and Sealing author-scenemodel-batching.md Understand direct creation, construction batching, whole-model building, loading-mode hints and sealed models.

  3. Author Reusable Geometry and Mesh Instances author-scenemodel-reusable-geometry.md Reuse one geometry across many meshes and objects for efficient authored content.

  4. Author SceneModel Objects and DataModel Semantics author-scenemodel-semantics.md Pair renderable SceneObjects with semantic DataObjects, property sets and relationships.

  5. Author SceneModel Layers and View State author-scenemodel-layers-view-state.md Use layers and per-view ViewObject state for visibility, style-bin membership and presentation control.

  6. Author SceneModel Transforms and Hierarchies author-scenemodel-transforms.md Build transform hierarchies and place meshes with reusable local transforms.

  7. Author SceneModel Materials and Textures author-scenemodel-materials-textures.md Author reusable materials, texture slots and mesh-local appearance.

  8. Author SceneModel Lines, Points and Overlays author-scenemodel-lines-points-overlays.md Add line primitives, point primitives and overlay-style authored content.

  9. Export an Authored SceneModel to XGF author-scenemodel-export-xgf.md Persist authored visual content as XGF and export matching DataModel JSON.

  10. Validate and Inspect Authored SceneModels author-scenemodel-validate-inspect.md Check authored models with SDKResult handling, stats, inspection reports and export/reload round-trips.

  11. Repair and Optimize Authored SceneModels author-scenemodel-repair-optimize.md Use scene-model inspection reports, fix strategies and optimizer passes before export.

  12. Author SceneModel Metadata and Property Workflows author-scenemodel-metadata-properties.md Define stable IDs, property sets, semantic relationships, schema checks and paired visual/semantic exports.


  1. SceneModel Update Mode - Renderer Policy Intent scene-update-hints.md Understand static and dynamic SceneModel.updateMode behavior, including how update mode and loading mode affect renderer-side storage and runtime value uploads.