You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"description": "In this tutorial, we'll learn how to convert large and complex IFC files into the lightweight, modern binary BIM data that we call Fragments for high-performance applications. Let's get started!"
4
+
"description": "Teams that receive IFC files from design software need to load them in a web viewer, but parsing IFC at runtime is too slow for large models — re-converting on every session makes the app unusable for end users. The Fragment format is a compact binary representation of IFC data optimized for fast loading. Converting once and saving the result means subsequent sessions skip the heavy parsing step entirely. This tutorial covers configuring the IFC-to-Fragment converter with its WASM path; fetching an IFC file and running the conversion with a progress callback; loading the resulting binary data into the 3D scene; disposing the loaded model to free memory; and a UI panel that sequences convert → add to scene → download as a local file. By the end, you'll have a complete IFC import pipeline that converts a model, renders it in the viewport, and lets you download the Fragment file for reuse in future sessions."
"description": "In this demo we will create a simple app that allows us to navigate the Fragments schema of IFC STEP files. This is not something you will usually need to do in your apps, but it will serve as a demonstration"
8
+
"description": "Developers who want to understand or debug how an IFC file maps to the Fragment binary format have no way to inspect the internal schema without writing custom parsing code or reading raw binary data by hand. The Fragment format is built on a FlatBuffers schema, and the library exposes utilities to deserialize any loaded model back into a plain JavaScript object that mirrors that schema — making the internal structure readable without external tooling. This tutorial covers converting an IFC file to Fragment bytes using the importer; loading the result into a 3D scene; deserializing the raw FlatBuffers data into a plain object; displaying the full schema tree in an interactive JSON viewer; wiring expand/collapse controls; loading from a local file picker or a sample wall model; and downloading the converted Fragment file. By the end, you'll have an IFC-to-Fragment schema explorer that lets you load any IFC file, visualize it in the viewport, and inspect its full Fragment binary structure as a browsable JSON tree."
"description": "Before diving into the world of Fragments, the first step is to load your Fragment Models. This is a crucial step to unlock the full potential of working with Fragments. Let's explore how to do it effectively."
12
+
"description": "Developers building a web viewer need to load multiple BIM models on demand — letting users add or remove disciplines independently — but managing the lifecycle of several concurrent models (load, retrieve binary data, dispose) requires tracking state and coordinating cleanup manually. FragmentsModels is the entry point for the entire Fragment runtime: it initializes the worker, owns the model list, and exposes load and dispose operations that keep the renderer in sync automatically. This tutorial covers initializing the worker and wiring the camera update loop; reactively adding each loaded model to the scene on load; retrieving a model's binary buffer for local download; listing all loaded model IDs; disposing one or all models to free memory; and a UI panel that toggles architecture and structure models independently and reveals a download button when a model is active. By the end, you'll have a multi-model viewer with on-demand load/unload controls and per-model download, built on the foundational Fragment lifecycle pattern every other tutorial extends."
"description": "Managing visibility—whether it's hiding, showing, or toggling—is a fundamental feature in any 3D application. In this tutorial, you'll learn how to effectively manage the visibility of your Fragments models!"
16
+
"description": "BIM coordinators navigating a large model need to isolate one discipline or system at a time — structure only, façade only, MEP only — but showing and hiding groups of elements by category in a custom web viewer requires tracking element state and updating the renderer manually for every toggle. Fragment models expose per-element visibility as a first-class operation: hide, toggle, and query visibility by local ID, with the renderer updating in a single call. This tutorial covers hiding all roof elements immediately after model load using `setVisible`; creating a reusable toggle function that resolves elements by category regex and calls `toggleVisible`; querying per-category visible/hidden counts via `getVisible`; querying model-wide visibility counts via `getItemsByVisibility`; and wiring all operations to UI buttons for roofs, walls, and slabs. By the end, you'll have a visibility control panel that hides, toggles, and reports element counts by category across a loaded Fragment model."
"description": "In this tutorial, we'll explore how to create detailed steel structures using the Fragments API. We'll learn how to generate steel frames, base plates, connections, and other structural steel elements with proper geometric relationships and detailing. Let's dive in!"
20
+
"description": "Structural engineers exploring preliminary frame configurations — bay count, span, section sizes — need to see the full 3D result including base plates and anchor details before committing to detailed design, but every parameter change in a traditional authoring tool means rebuilding the model by hand. The Fragments geometry engine provides H-profile extrusion, circle-extrusion paths for anchor hooks, and flat plate primitives that compose into complete structural assemblies. Combined with the Elements API, each generated mesh becomes a named Fragment element that can be viewed, edited, and re-exported. This tutorial covers defining parametric settings for span, modules, column section dimensions, and base plate geometry; generating a wireframe skeleton from start-point pairs; extruding H-profiles along each member axis; creating base plates, cross stiffeners, corner plates, anchor bolts, and hooked rebar using circle-extrusion paths; registering every piece as a Fragment element via the editor API; debounced regeneration on parameter change; and a live UI panel for length and module count sliders. By the end, you'll have a fully parametric steel frame that rebuilds in real time as you adjust span and module count, with correct H-section profiles, base plate connection details, and anchor hooks rendered with PBR metalness and HDRI lighting."
"description": "In this tutorial, we'll explore how to create and work with reinforced concrete elements using the Fragments API. We'll learn how to generate column and footing rebars with proper spacing, colors, and geometric relationships. Let's dive in!"
24
+
"description": "Structural engineers need to visualize and validate rebar layouts in reinforced concrete elements — footing grids, column longitudinal bars, transverse stirrups — but generating that geometry programmatically in a web viewer means handling complex swept paths, bend radii, and spacing rules from scratch. The Fragments geometry engine provides circle-extrusion primitives and parametric path definitions that make generating rebar elements as straightforward as defining their axes and radii. This tutorial covers creating an empty Fragment model at runtime; defining parametric settings for footing and column dimensions, rebar radius, spacing, padding, and overlap; generating extruded concrete geometry for the footing and column; generating longitudinal straight rebars and transverse stirrups with correct corner geometry and overlap hooks; color-coding rebar types (longitudinal, transverse, footing); and wiring all parameters to a live UI panel so the reinforcement regenerates on any change. By the end, you'll have a fully parametric reinforced concrete visualizer where adjusting cover, spacing, or element dimensions instantly updates the 3D rebar layout."
"description": "Determining what lies beneath the mouse pointer is one of the most essential operations in any 3D application. Working with Fragments is no exception, and we provide you with convenient tools to achieve this. Let’s dive in!"
28
+
"description": "Every interactive feature in a 3D BIM viewer — selection, hover feedback, click-to-inspect — depends on knowing which element the user is pointing at. Without a built-in picking mechanism, developers have to manage ray-model intersection manually across every loaded model. Fragment models expose a built-in raycast method that runs in the worker thread and returns the hit element, position, and surface normal without blocking the main thread. This tutorial covers raycasting across all loaded models on pointer move and returning the closest hit; displaying a surface-normal indicator line at the hover position; raycasting on click and placing a sphere marker at the hit point; and logging the full raycast result (element id, distance, point, normal) to the console. By the end, you’ll have the foundational picking setup that every other interaction feature — selection, highlighting, property inspection — builds on."
"description": "A BIM model is only as valuable as the information it provides. Retrieving specific data efficiently is crucial for any workflow. In this tutorial, you'll learn how to extract and utilize data from Fragments with ease!"
32
+
"description": "When reviewing a BIM model in a web viewer, clicking an element should show its name, property sets, and where it sits in the building hierarchy — but querying that information from a loaded model, navigating IFC relations, and formatting the result for display requires understanding the internal data structure. The Fragment model API provides a unified query interface that handles attributes, relations, categories, and spatial structure through a single, consistent set of methods. This tutorial covers clicking to select and highlight an element via raycasting; retrieving all attributes or a specific subset (e.g. only Name); fetching related property sets by traversing IsDefinedBy relations and formatting the result into a plain object; listing all element names in a given category; and reading the full spatial structure hierarchy of the model. By the end, you'll have a working element inspector that can display attributes, property sets, category queries, and spatial structure from any clicked element in a Fragment model."
"description": "In this tutorial, we'll explore how to work with materials in Fragments models. We'll learn how to load textures, apply different material properties, and dynamically change materials on specific elements. Let's dive in!"
36
+
"description": "BIM models loaded from IFC files render with flat, uniform colors — no textures, no reflections, no material realism. For presentations, digital twins, or marketing renders, that level of fidelity isn't enough, but the Fragment format doesn't carry PBR material data out of the box. The Fragment material pipeline gives you hooks to intercept every material as it loads and replace or enhance it with any Three.js material — including textures, metalness, roughness, and environment maps. This tutorial covers loading an HDRI environment map for realistic reflections; loading color, normal, and roughness texture maps with repeat wrapping; intercepting materials on load and replacing them with PBR equivalents based on their color (steel gets metalness, everything else gets a concrete texture); generating UV coordinates via cubic projection so textures map correctly onto arbitrary BIM geometry; and identifying structural elements by attribute to apply a different material programmatically after load. By the end, you'll have a Fragment model rendering with physically-based materials, environment lighting, and per-element material overrides driven by BIM data."
"description": "In this tutorial, we'll explore how to easily edit BIM properties using the Fragments Edit API. We will create, delete, edit and relate properties, register everything in a history that we can revert and more. Let’s dive in!"
40
+
"description": "BIM data quality is a persistent problem — wrong fire ratings, missing property sets, outdated material specs — but correcting these errors today means opening the authoring software, finding the element, editing the property, and re-exporting, even for a single value change. The properties editor in the Fragments API lets you read, update, create, and delete BIM attributes and relations directly in the loaded model, without any round-trip to the authoring tool. This tutorial covers selecting an element and loading its full property tree (attributes and nested relations like IsDefinedBy); editing attribute values inline; applying changes back to the model; creating a relation between existing items; removing a relation; creating a new item with a custom category and arbitrary attributes; and deleting an item from the model. By the end, you’ll have a working BIM property editor capable of reading and writing element data, managing relations, and adding or removing items entirely in the browser."
"description": "In this tutorial, we'll explore how to easily edit BIM elements using the Fragments Edit API. We will move things around, change its materials, edit its instance attributes, register everything in a history that we can revert and more. Let’s dive in!"
44
+
"description": "Architects and engineers frequently need to make quick adjustments — move a column, change a wall color, swap a door geometry — directly in the 3D viewer without round-tripping back to Revit or exporting a new IFC file. The Elements API bridges that gap: it wraps a selected element as editable Three.js meshes, lets you manipulate them with standard tools, and generates the edit requests automatically when you apply. This tutorial covers selecting an element and obtaining its editable mesh representation; attaching Three.js TransformControls to move and rotate the element at the global transform level and at the per-sample local transform level; changing sample materials and overriding sample geometry with a custom shape; applying all changes back to the Fragment model; and discarding changes to restore the original state. By the end, you’ll have a pattern for building interactive element editors that use familiar Three.js workflows and commit changes to the Fragment model in one step."
"description": "Viewing BIM models is cool, but sometimes we also need to edit the information of existing BIM models. In this tutorial, we'll explore how to edit BIM models using the Fragments Edit API, covering most of the edit operations."
48
+
"description": "BIM models aren't static — materials need recoloring, element positions need adjusting, and data attributes need updating without re-exporting from the authoring tool. Without a programmatic edit API, that means round-tripping through Revit or IFC importers for every change. The Fragments Edit API makes model mutations possible at runtime through a declarative request system: describe what to change, submit the batch, and the model updates in the background without blocking the renderer. This tutorial covers editing the most-used material color; replacing all geometry representations with a custom shell; reassigning instance materials across all samples; modifying global and local transforms to reposition elements; overriding BIM attribute data on all walls; and editing model-level metadata — each as a batch of typed edit requests applied via the editor. By the end, you'll understand the full edit request system and how to mutate any aspect of a loaded Fragment model — geometry, appearance, position, data, and metadata — at runtime."
"description": "In this tutorial, we'll learn how to build a configurator using the Fragments API. We'll define some basic parameters (like building width and length) and generate one or multiple floors of a simple building based on them. Let’s dive in!"
52
+
"description": "In early design stages, architects and developers need to explore building options — changing floor count, column grid, building footprint — but traditional BIM tools require manually re-modeling every variant, making rapid iteration impractical. The Fragments API exposes an editable model and a geometry engine that together make parametric generation possible: define shapes programmatically, write them into a live Fragment model, and regenerate on demand. This tutorial covers creating an empty Fragment model at runtime; using the geometry engine to produce extruded columns, floors, walls, windows, a staircase opening, and a roof from parametric settings; writing all generated elements into the model via the editor API; setting up a horizontal clipping plane with filled section cuts via ClipStyler; enabling VSM shadows that update on camera rest; applying a postproduction style; and wiring all parameters to a live UI panel so the building regenerates on any change. By the end, you’ll have a fully parametric building configurator where adjusting width, floor count, column spacing, or clip height instantly regenerates the 3D model."
0 commit comments