threejs-impl-ifc-viewer

Load and render IFC/BIM building models in Three.js scenes using web-ifc or @thatopen/components.

1|Updated Aug 20, 2023
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-ifc-viewer-imanlangaran
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-impl-ifc-viewer
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-impl-ifc-viewer
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-ifc-viewer-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires web-ifc, three, @thatopen/components, @thatopen/components-front, and includes references (resource) components.

What problem does it solve? Building IFC/BIM viewers in the browser is error-prone: developers often use the deprecated web-ifc-three bridge, violate AGPL-3.0 licensing unknowingly, leak WASM memory by never closing models, or crash the browser by loading large IFC files without streaming. This Skill provides correct, current patterns for loading, rendering, and managing IFC models in Three.js. ## Core Features & Use Cases - Two implementation approaches: Low-level geometry extraction with web-ifc (MIT) for full control, or high-level viewer setup with @thatopen/components v3.x including fragments, highlighting, and clipping planes. - Geometry conversion: Converts web-ifc interleaved vertex data and placement transforms into Three.js BufferGeometry meshes with correct materials and colors. - Memory management: Enforces model closing, geometry disposal, and storey-based streaming strategies for files from 10MB to 200MB+. - Use Case: A developer building a web-based BIM viewer needs to load a 120MB IFC file, display its spatial tree by storey, and let users click elements to inspect properties without crashing the browser tab. ## Quick Start Ask the AI to load an IFC building model into a Three.js scene using web-ifc with proper WASM setup and memory cleanup.

Frequently Asked Questions about threejs-impl-ifc-viewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load an IFC file in Three.js?

Use web-ifc directly: create an IfcAPI instance, call SetWasmPath pointing to the directory containing web-ifc.wasm, await Init(), then OpenModel with a Uint8Array. Extract geometry via GetFlatMesh and GetPlacedGeometry, then convert to Three.js BufferGeometry.

web-ifc vs @thatopen/components: which should I use?

Use web-ifc when you need full control over geometry extraction or a custom rendering pipeline. Use @thatopen/components v3.x when you want a full BIM viewer quickly with built-in fragments, highlighting, and clipping planes. Both are MIT licensed in current versions.

Is web-ifc-three still safe to use?

No. web-ifc-three is deprecated and unmaintained since 2023, with unresolved bugs and no support for newer IFC schemas. Use web-ifc directly or migrate to @thatopen/components, which replaced the old IFC.js ecosystem.

Why does my browser crash when loading large IFC files?

Loading all geometry at once exhausts WASM heap and GPU memory. For files over 50MB, stream geometry by storey or element type, dispose off-screen geometry with geometry.dispose(), and always call CloseModel to release WASM memory.

Does @thatopen/components require open-sourcing my app?

Version 3.x of @thatopen/components is MIT licensed, so no. However, older packages like openbim-components v1 were AGPL-3.0, which requires releasing your entire application's source. Always verify the license of the exact installed version.

Why does ifcApi.Init() fail to find the WASM file?

SetWasmPath must be called before Init() and must point to a directory where web-ifc.wasm is actually served. Copy the .wasm file from node_modules/web-ifc into your public or static assets directory, since bundlers do not serve it by default.