2nd/10_Wiki/Topics/DevOps_and_Security/IFCjs.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-ifcjs	IFCjs	10_Wiki/Topics	verified	self	That Open Engine web-ifc Three.js IFC BIM viewer	none	A	0.85	applied	bim ifc web three-js aec webgl		2026-05-10	pending	language framework typescript web-ifc-three

IFCjs

매 한 줄

"매 browser 안의 IFC (Industry Foundation Classes) reader/viewer — 매 BIM 데이터를 매 Three.js scene 으로". IFCjs (현재 매 "That Open Engine" 으로 rebrand) 는 매 web-ifc (WASM IFC parser) + 매 Three.js based 매 viewer 의 묶음. 매 AEC (Architecture/Engineering/Construction) 매 web 진입의 standard. 매 2026 현재 매 OpenBIM 운동 의 매 핵심 component.

매 핵심

매 stack 의 layer

• web-ifc (C++ → WASM): 매 IFC2x3 / IFC4 / IFC4x3 STEP file 의 매 streaming parser.
• web-ifc-three (legacy): 매 Three.js mesh 로 변환, property set 추출.
• @thatopen/components: 매 modern (2024+) — Three.js 위 UI/tool framework.
• @thatopen/ui: 매 web-component 기반 panel/grid/property card.

매 IFC 의 본질

• STEP physical file: ASCII textual, 매 entity reference graph (#1=IFCBUILDING(...)).
• EXPRESS schema: 매 IFC4 는 매 1700+ entity types.
• Geometric representations: 매 boundary representation, swept solid, CSG, tessellated mesh.
• Property sets (Psets): 매 entity 별 매 metadata bag.

매 web vs desktop trade-off

• 매 desktop (Revit, ArchiCAD): full editing, plugin ecosystem.
• 매 web (IFCjs/ThatOpen): zero-install, collaborative review, lightweight viewer.
• 매 hybrid: 매 export IFC from Revit → web viewer.

💻 패턴

Basic IFC viewer (ThatOpen Components 2024+)

import * as OBC from '@thatopen/components';
import * as THREE from 'three';

const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene, OBC.SimpleCamera, OBC.SimpleRenderer
>();

const container = document.getElementById('app')!;
world.scene  = new OBC.SimpleScene(components);
world.renderer = new OBC.SimpleRenderer(components, container);
world.camera = new OBC.SimpleCamera(components);
world.scene.setup();

components.init();

const fragments = components.get(OBC.FragmentsManager);
const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();

const file = await fetch('/models/building.ifc');
const buffer = new Uint8Array(await file.arrayBuffer());
const model = await ifcLoader.load(buffer);
world.scene.three.add(model);

Property extraction via web-ifc directly

import { IfcAPI, IFCWALLSTANDARDCASE } from 'web-ifc';

const api = new IfcAPI();
api.SetWasmPath('/wasm/');
await api.Init();

const data = new Uint8Array(await fetch('/m.ifc').then(r => r.arrayBuffer()));
const modelID = api.OpenModel(data);

const wallIDs = api.GetLineIDsWithType(modelID, IFCWALLSTANDARDCASE);
for (let i = 0; i < wallIDs.size(); i++) {
  const id = wallIDs.get(i);
  const wall = api.GetLine(modelID, id, true); // recursive expand refs
  console.log(wall.GlobalId.value, wall.Name?.value);
}
api.CloseModel(modelID);

Picking + property panel

const highlighter = components.get(OBC.Highlighter);
highlighter.setup({ world });

highlighter.events.select.onHighlight.add(async (fragmentMap) => {
  const indexer = components.get(OBC.IfcRelationsIndexer);
  for (const fragId in fragmentMap) {
    const expressIDs = [...fragmentMap[fragId]];
    for (const id of expressIDs) {
      const psets = await indexer.getEntityRelations(model, id, 'IsDefinedBy');
      console.log('expressID', id, 'psets', psets);
    }
  }
});

Convert IFC → fragments (compact binary)

// fragments are ThatOpen's optimized binary mesh format
const fragmentManager = components.get(OBC.FragmentsManager);
const buffer = fragmentManager.export(model);
await fetch('/upload', { method: 'POST', body: buffer });

Server-side conversion (Node + web-ifc-node)

import { IfcAPI } from 'web-ifc/web-ifc-api-node';
import { promises as fs } from 'fs';

const api = new IfcAPI();
api.SetWasmPath('node_modules/web-ifc/');
await api.Init();
const buf = await fs.readFile('input.ifc');
const id = api.OpenModel(buf);
const flatMesh = api.LoadAllGeometry(id);
// ... extract triangles, write to glTF

BIM clash detection (rough proxy)

import { Box3, Vector3 } from 'three';

function findClashes(meshes: THREE.Mesh[]) {
  const boxes = meshes.map(m => {
    const b = new Box3().setFromObject(m);
    return { box: b, mesh: m };
  });
  const clashes: [THREE.Mesh, THREE.Mesh][] = [];
  for (let i = 0; i < boxes.length; i++)
    for (let j = i + 1; j < boxes.length; j++)
      if (boxes[i].box.intersectsBox(boxes[j].box))
        clashes.push([boxes[i].mesh, boxes[j].mesh]);
  return clashes;
}

매 결정 기준

상황	Approach
Web-only IFC viewer	ThatOpen Components
Server-side IFC parsing	web-ifc-node
Property extraction only	web-ifc API directly
Heavy editing	desktop (Revit) export
Massive models (>1GB)	fragments format + tile streaming
Clash detection on web	use AABB pre-filter + GPU mesh-mesh

기본값: 매 modern AEC web app — ThatOpen Components + fragments.

🔗 Graph

• 응용: Digital Twin
• Adjacent: Three.js

🤖 LLM 활용

언제: IFC entity 의 mapping 설명 (IFC → glTF), property set 매 자연어 query, 매 UI panel scaffold. 언제 X: 매 large IFC parsing performance 최적화 — 매 measure 매 직접.

❌ 안티패턴

• Loading 1GB IFC into browser memory directly: 매 OOM — 매 fragments + streaming 사용.
• Recursive GetLine on every entity: 매 N² — 매 IfcRelationsIndexer 사용.
• Treating IFC as glTF: 매 IFC 는 매 graph + semantics, 매 mesh-only X.
• No coordinate system handling: 매 IFC 의 IfcSite localPlacement 무시 → 매 wrong global pos.
• Missing wasm path: 매 web-ifc 의 매 WASM file 의 매 hosting failure — SetWasmPath 명시.

🧪 검증 / 중복

• Verified (ThatOpen Engine docs 2026, web-ifc GitHub).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — IFC stack + ThatOpen Components patterns