กลับไปยังบล็อก BIM และ IFC
เครื่องมือและการเปรียบเทียบ · 2026-10-01 · 9 นาที
วิธีฝังโปรแกรมดู IFC ในเว็บไซต์ CDE หรือรายงาน Power BI
ใส่โมเดล 3D แบบโต้ตอบได้ในข้อเสนอโครงการ หน้าเว็บโครงการ แผง CDE หรือแดชบอร์ด Power BI ด้วย iframe เพียงอันเดียว ไม่ต้อง build และไม่ต้องอัปโหลดโมเดลขึ้นเซิร์ฟเวอร์ของใคร พร้อมอธิบายว่าพารามิเตอร์ URL ทำอะไร และเมื่อไรควรใช้ SDK
วิธีฝังโปรแกรมดู IFC ในเว็บไซต์ CDE หรือรายงาน Power BI — IFC Viewer Online article cover
ภาพหน้าจอของโมเดล BIM เป็นของแปลกที่จะใส่ในข้อเสนอโครงการ คุณค่าของโมเดลคือเป็นสามมิติและเต็มไปด้วยข้อมูล แต่ภาพหน้าจอทิ้งทั้งสองอย่าง โปรแกรมดูแบบฝังเก็บไว้ครบ ผู้อ่านหมุนดู ตัดหน้าตัด คลิกองค์ประกอบเพื่ออ่าน property ได้บนทุกอุปกรณ์ โดยไม่ต้องติดตั้งอะไร
ทำได้ด้วย iframe อันเดียว แต่จะทำให้ดีต้องรู้จักพารามิเตอร์สี่ตัวและกฎความปลอดภัยของเบราว์เซอร์หนึ่งข้อ
การฝังขั้นต่ำ
<iframe
src="https://www.ifcvieweronline.eu/?model=https://your-host.com/model.ifc&embed=1"
width="100%" height="600"
style="border:0;border-radius:12px;max-width:100%"
loading="lazy" allow="fullscreen"
title="3D IFC model">
</iframe>
เบราว์เซอร์ของผู้เข้าชมดาวน์โหลด IFC จากโฮสต์ของคุณโดยตรงและประมวลผลในเครื่อง โมเดลไม่เคยถูกอัปโหลดมาที่เรา ซึ่งมักเป็นคำถามแรกของคนที่เซ็น NDA และเป็นความต่างที่แท้จริงจากการฝังแบบที่ต้องอัปโหลดโมเดลขึ้นคลาวด์ของผู้ให้บริการก่อน
สร้างโค้ดฝังของคุณ
วาง URL ของไฟล์ IFC สาธารณะ เลือกโหมด แล้วคัดลอก iframe พรีวิวจะอัปเดตแบบสด
เปิด IFC Viewer
พารามิเตอร์ที่ควรรู้
| พารามิเตอร์ | ทำอะไร | ใช้เมื่อ |
|---|
| model | โหลด URL ของ IFC หนึ่งรายการหรือมากกว่า (คั่นด้วยจุลภาคสำหรับชุดแบบ federated) | ทุกกรณี |
| ui | โหมดอินเทอร์เฟซ: minimal, full, kiosk หรือ client | ปรับให้เข้ากับผู้ชม |
| validate | ตรวจสอบเมื่อโหลดและแสดง Health Score | แสดงคุณภาพ ไม่ใช่แค่เรขาคณิต |
| isolate / select | เปิดพร้อมแยกแสดงคลาส IFC หนึ่งคลาส หรือเลือกองค์ประกอบหนึ่งชิ้นไว้ | ชี้ไปยังสิ่งที่คุณกำลังเขียนถึง |
| accent | ย้อมสีโปรแกรมดูด้วยรหัสสีฐานสิบหก | แดชบอร์ดและหน้าที่ใช้แบรนด์ของคุณ |
| lang | บังคับภาษาของอินเทอร์เฟซ | เว็บไซต์หลายภาษา |
| map | วางโมเดลบนแผนที่ฐานตามการอ้างอิงภูมิศาสตร์ของโมเดล | แสดงบริบทของที่ตั้งในข้อเสนอโครงการ |
ข้อมูลอ้างอิงฉบับเต็ม รวมถึงการศึกษาแสงแดดและพอยต์คลาวด์ อยู่ในเอกสารการฝังโหมด ui สำคัญที่สุด minimal เหมาะกับบทความบล็อกและเอกสาร kiosk ตัดทุกอย่างออกสำหรับจอในล็อบบี้หรือสำนักงานขาย ส่วน client ออกแบบมาสำหรับส่งให้เจ้าของอาคาร มีมุมมองที่สะอาดตาและตราคุณภาพ โดยไม่มีเครื่องมือที่ผู้ประสานงานต้องใช้แต่ลูกค้าไม่ต้องใช้
ใช้ได้ที่ไหนบ้าง
- เว็บไซต์และบล็อก: CMS ใดก็ได้ที่รับ HTML เช่น WordPress, Webflow, Ghost หรือเว็บไซต์แบบ static
- Power BI: ใช้ภาพแบบเนื้อหาเว็บหรือ HTML viewer โดยตั้ง accent ให้เข้ากับธีมของรายงาน วางโมเดลไว้ข้างกราฟต้นทุนและแผนงานที่มันช่วยอธิบาย
- Notion, Confluence, SharePoint: วาง URL เป็นบล็อกฝัง
- แผง CDE และเครื่องมือภายในองค์กร: ใช้ iframe พร้อมส่งเหตุการณ์ในวงจรชีวิตไปยังหน้าต่างแม่ เพื่อให้ระบบโฮสต์ตอบสนองเมื่อโมเดลพร้อมหรือตรวจสอบเสร็จ
- ข้อเสนอและเอกสารประกวดราคา: ใช้เป็นลิงก์หากรูปแบบเอกสารไม่รองรับการฝัง ลิงก์ไปยังโมเดลที่โต้ตอบได้ในเอกสารประกวดราคายังหายากพอที่จะสะดุดตา
ทำไมโหลดไม่ขึ้น: CORS และอีกสองสาเหตุ
โมเดลเดินทางจากที่เก็บไฟล์ของคุณไปยังเบราว์เซอร์ของผู้เข้าชม ถ้าโฮสต์ไม่มี header CORS เบราว์เซอร์จะไม่ส่งไฟล์ให้
- ลิงก์แชร์ที่ส่งหน้าเว็บกลับมาแทนไฟล์ ลิงก์แชร์ของ Dropbox, OneDrive และ Google Drive มักเปิดหน้าพรีวิว คุณต้องใช้ลิงก์แบบดาวน์โหลดโดยตรง
- ลิงก์ที่ต้องล็อกอิน เบราว์เซอร์ของผู้เข้าชมไม่มีเซสชันใน CDE ของคุณ ลิงก์ส่วนตัวจึงส่งหน้าล็อกอินกลับมา
- ไฟล์ขนาดใหญ่มากบนโฮสต์ที่ช้า โมเดลจะถูกดาวน์โหลดทั้งไฟล์ก่อนประมวลผล ให้เก็บชุด federated ขนาดใหญ่ไว้บนที่ที่เร็ว และพิจารณาแบ่งไฟล์
ถ้าโมเดลใหญ่เกินกว่าจะฝังได้สะดวก วิธีลดขนาดไฟล์ IFC อธิบายวิธีลดขนาดอย่างปลอดภัย
เมื่อ iframe ไม่พอ: SDK
iframe แค่แสดงโมเดล ทันทีที่หน้าเว็บของคุณต้องสื่อสารกับมัน เช่น ไฮไลต์องค์ประกอบเมื่อคลิกแถวในตาราง ดึง Health Score เข้าแดชบอร์ด รัน specification ของ IDS แล้วแสดงรายการที่ไม่ผ่านใน UI ของคุณเอง หรือเริ่มทัวร์นำชม คุณต้องใช้ SDK ซึ่งห่อโปรแกรมดูตัวเดียวกันด้วย API แบบสองทางที่มีการกำหนดชนิด ใช้ได้ทั้งเป็นสคริปต์หรือเป็น web component <ifc-viewer>
ถ้าคุณอยากสร้างโปรแกรมดูเองจากไลบรารีพื้นฐาน การดู IFC บนเว็บด้วย three.js และ Fragments อธิบายว่าต้องทำอะไรบ้าง และทำไมทีมส่วนใหญ่ที่เริ่มจากตรงนั้นจึงจบที่การฝัง
สำหรับโครงการที่เป็นความลับ สถาปัตยกรรมฝั่งไคลเอนต์แบบเดียวกับที่ทำให้การฝังทำงานได้ ก็คือสิ่งที่กันโมเดลไว้ไม่ให้ไปอยู่บนเซิร์ฟเวอร์ของบุคคลที่สาม รายละเอียดอยู่ใน โปรแกรมดู IFC สำหรับโครงการที่เป็นความลับและมี NDA
วิธีฝังโปรแกรมดู IFC ในเว็บไซต์ CDE หรือรายงาน Power BI