I. Buổi chiều trình duyệt bị sập

Năm ngoái, một Bim Công ty tư vấn kỹ thuật đã nhận một dự án trực quan hóa dữ liệu trên web cho ngành xây dựng. Yêu cầu khá đơn giản: hiển thị mô hình Revit do khách hàng cung cấp trên trình duyệt, hỗ trợ điều hướng tham quan ảo, nhấp chuột vào các thành phần và kiểm tra thuộc tính.

Nhóm dự án nghĩ rằng việc này sẽ đơn giản. Cài đặt three.js, tìm một công cụ để chuyển đổi .rvt sang định dạng khác.GlbSau đó, tải nó bằng GLTFLoader, xong.

Sau đó, khách hàng đã gửi các tệp mô hình.

Tệp lưu trữ nén có dung lượng 12GB.

Sau khi giải nén, chỉ riêng tệp mô hình chính đã có dung lượng 8,7GB. Nhóm đã chấp nhận rủi ro và sử dụng một công cụ thông thường để chuyển đổi nó sang định dạng glTF — quá trình chuyển đổi mất 40 phút và tạo ra một tệp .glb có dung lượng 6GB. Họ đã đưa tệp này vào dự án Three.js của mình và—

Trình duyệt lập tức chuyển sang màn hình trắng.

Màn hình điều khiển chỉ có một dòng: Hết bộ nhớ.

Thành thật mà nói, cả nhóm đều sững sờ. Không phải là hiệu năng chậm, cũng không phải là tốc độ khung hình thấp — mà là nó hoàn toàn không chạy được.

II. Các nỗ lực giải cứu (và lý do tại sao tất cả đều thất bại)

Trong hai tuần tiếp theo, nhóm đã tích cực tham gia thảo luận trên mọi diễn đàn kỹ thuật mà họ có thể tìm thấy.

Thử nghiệm 1: Nén Draco

Họ đã nén tệp glTF bằng Draco rồi tải nó lên. Dung lượng tệp giảm từ 6GB xuống còn 1,8GB — điều này có vẻ đầy hứa hẹn.

Nhưng quá trình phân tích cú pháp luồng chính JavaScript vẫn mất hơn 90 giây, trong thời gian đó trang web bị treo hoàn toàn. Người dùng sẽ phải đợi một phút rưỡi sau khi mở trang web. Không ai có thể chấp nhận điều đó.

Thử nghiệm 2: LOD thủ công

Họ đã thử tạo thủ công ba phiên bản với độ chính xác khác nhau của mô hình trong Blender và tự viết mã để chuyển đổi dựa trên khoảng cách camera. Điều này đã cải thiện được phần nào tình hình — nhưng việc tạo thủ công ba phiên bản của một mô hình duy nhất đã mất gần cả ngày. Khách hàng có nhiều hơn một mô hình, vì vậy cách tiếp cận này quá kém hiệu quả. Hơn nữa, bản thân Blender gặp khó khăn với các mô hình siêu lớn và thường xuyên bị lỗi mà không có cảnh báo.

Thử nghiệm 3: Chuyển đổi đám mây

Họ đã thử một nền tảng điện toán đám mây thương mại. Việc tải mô hình lên mất hai giờ, và sau khi chuyển đổi và tải xuống lại — hầu hết dữ liệu thuộc tính thành phần đã biến mất. Người dùng muốn nhấp vào tường để xem thông tin vật liệu, nhưng tất cả những gì họ nhận được chỉ là một đối tượng lưới (Mesh) trống rỗng. Các yêu cầu đơn giản là không được đáp ứng.

Sau gần một tháng vật lộn, công ty tư vấn BIM đã đi đến một kết luận khó chấp nhận:

Bản thân Three.js không có vấn đề gì. Vấn đề là nó đang xử lý dữ liệu 3D/BIM cấp công nghiệp, chứ không phải tài sản game. Đây là hai thế giới hoàn toàn khác nhau.

Do không thể tự giải quyết vấn đề bằng đội ngũ của mình, công ty tư vấn BIM đã tìm đến công ty 3D Expert Co.,Ltd.

III. Kiến thức chuyên môn về nền tảng kỹ thuật của chuyên gia 3D

Công ty TNHH Chuyên gia 3D, có trụ sở tại Osaka, Nhật Bản, đã tích lũy nhiều năm kinh nghiệm trong lĩnh vực xử lý dữ liệu và mô hình 3D/BIM quy mô lớn với dung lượng nhẹ. Đây không phải là một giải pháp được lắp ghép vội vàng — đội ngũ của chúng tôi đã từ lâu nghiên cứu sâu về các khía cạnh cốt lõi của việc phân tích dữ liệu 3D cấp công nghiệp, xử lý nhẹ và hiển thị web hiệu suất cao, với sự hiểu biết sâu sắc về cấu trúc bên trong của các định dạng công nghiệp chính thống bao gồm Revit, IFC, SolidWorks và Bentley.

Sau khi nhận được yêu cầu hỗ trợ từ công ty tư vấn BIM, nhóm chuyên gia 3D đã nhanh chóng xác định được vấn đề. Trong quá trình phân tích, họ đã chia nhỏ các điểm nghẽn mà Three.js gặp phải với các mô hình lớn thành bốn lớp:

Đây không phải là vấn đề mà một bản vá lỗi trên Three.js có thể khắc phục được — nó đòi hỏi những thay đổi cấu trúc từ nền tảng của quy trình kết xuất. Và đó chính xác là lĩnh vực mà đội ngũ 3D Expert có nhiều năm kinh nghiệm.

IV. So sánh các giải pháp hiện có

Nhóm chuyên gia 3D đã xem xét mọi giải pháp mà họ có thể tìm thấy:

Các giải pháp điện toán đám mây có một trở ngại không thể tránh khỏi: dữ liệu phải được tải lên. Đối với khách hàng trong ngành xây dựng — những người cực kỳ nhạy cảm về bảo mật dữ liệu — điều này về cơ bản là một yếu tố quyết định. Hơn nữa, các định dạng được chuyển đổi là những "hộp đen", khiến các nhà phát triển giao diện người dùng không có cách nào để tùy chỉnh.

Dựa trên nhiều năm tích lũy kinh nghiệm kỹ thuật, nhóm chuyên gia 3D Expert đã đưa ra câu trả lời của riêng họ: Trình tải rapid3D cho three.js.

V. Cách rapid3D Loader dành cho three.js giải quyết những vấn đề này

rapid3D Loader for three.js không phải là một lớp bao bọc xung quanh Three.js, cũng không phải là một công cụ chuyển đổi định dạng đơn giản. Nó là một quy trình hoàn chỉnh từ chuyển đổi mô hình đến hiển thị giao diện người dùng.

Kiến trúc: Nhà sản xuất - Người tiêu dùng

┌──────────────────────────────┐ ┌───────────────────────────────────┐ │ Trình tạo tập tin tùy chọn (Nhà sản xuất)│ ────► │ Gói JS Rapid3D Loader │ │ │ │ (Người dùng) │ │ · Chạy cục bộ, không cần đám mây │ │ · Được xuất bản dưới dạng gói npm │ │ uploads │ │ · Nhúng vào các dự án Three.js │ │ · Phân tích cú pháp gốc của hơn 20 │ │ · Tải song song đa luồng │ │ định dạng │ │ · Tải LOD động đa cấp │ │ · Tạo hình học .opt │ │ · Kết xuất khối + kết xuất tập tin │ │ │ │ │ │ │ │ · Tạo thuộc tính .db │ │ · Giao diện API mở │ │ cơ sở dữ liệu │ │ │ │ · Phiên bản Windows có sẵn │ │ │ │ để tải xuống │ │ │ └─────────────────────────────┘ └───────────────────────────────────┘ 

Những ưu điểm cốt lõi của kiến ​​trúc này:

• Quá trình chuyển đổi diễn ra cục bộ trên máy tính của người dùng. — Dữ liệu cốt lõi không bao giờ rời khỏi máy tính của khách hàng, đáp ứng ngay lập tức các yêu cầu về bảo mật và tuân thủ.
• Giao diện người dùng nhận được dữ liệu đã được tối ưu hóa trước. Định dạng .opt các tập tin, loại bỏ nhu cầu phân tích lại nặng nề trong trình duyệt.
• Dữ liệu hình học và dữ liệu thuộc tính được lưu trữ riêng biệt. — Tệp .opt xử lý việc hiển thị, tệp .db xử lý các truy vấn dữ liệu nghiệp vụ, mỗi tệp được tải khi cần mà không ảnh hưởng đến tệp kia.

Bốn công nghệ cốt lõi giúp hiệu năng vượt trội

1. Tải hàng đợi đa luồng

// Tải các tập tin lớn bằng Three.js gốc: đơn luồng, bị đóng băng khi hoàn tất const loader = new GLTFLoader (); loader.load ( 'model.glb' , ( gltf ) => { // Bước này có thể mất 90 giây, trong thời gian đó trang hoàn toàn không phản hồi scene.add ( gltf.scene ); }); // rapid3D Loader: xử lý song song đa Worker bên trong // API cũng đơn giản, nhưng các luồng Worker được tự động gán nội bộ rapidLoader.load ( 'model.opt' , { onProgress : ( percent ) => console.log ( ` ${percent} %` ) // Có phản hồi tiến độ }); 

Việc phân tích các tập tin lớn được chia thành các tác vụ song song, tận dụng tối đa sức mạnh của CPU đa lõi. Các nhà phát triển không cần phải tự quản lý các luồng xử lý (Worker threads) nữa.

2. Tải LOD động đa cấp

Đây là công nghệ cốt lõi đằng sau khả năng tải dữ liệu dưới một giây của rapid3D Loader. Thay vì tải toàn bộ mô hình vào bộ nhớ cùng một lúc, nó tải dữ liệu mô hình một cách động ở các mức độ chính xác khác nhau dựa trên góc nhìn và khoảng cách của camera. Những gì người dùng nhìn thấy là những gì được tải; những gì không hiển thị sẽ không tiêu tốn tài nguyên.

Điều này có nghĩa là ngay cả khi đối mặt với mô hình Revit 8,7GB, người dùng không cần phải đợi toàn bộ tệp tải xong — dữ liệu cần thiết cho việc hiển thị ban đầu trên màn hình là tối thiểu, giữ thời gian tải dưới 10 giây. Từ góc nhìn toàn cảnh khuôn viên trường đến cận cảnh một con vít duy nhất, hệ thống tải phân cấp LOD tự động lên lịch tài nguyên mô hình ở các mức độ chính xác khác nhau dựa trên khoảng cách camera, diện tích màn hình và tốc độ chuyển động, duy trì tốc độ khung hình ổn định trong suốt quá trình.

3. Kết xuất theo khối + Kết xuất theo thể hiện

Nhiều thành phần trong các mô hình lớn có tính lặp lại — ví dụ, một tòa nhà văn phòng có thể có 200 cửa sổ giống hệt nhau. Phương pháp truyền thống gán một lệnh vẽ (Draw Call) cho mỗi cửa sổ, dẫn đến 200 lệnh vẽ. Kết xuất theo khối (chunk rendering) chia đồ thị cảnh thành các đơn vị kết xuất dễ quản lý, và kết hợp với kết xuất theo thể hiện GPU (GPU instanced rendering), 200 cửa sổ đó chỉ cần một số ít lệnh vẽ.

4. Loại bỏ đối tượng trong vùng nhìn + Loại bỏ đối tượng động + Vẽ được lưu vào bộ nhớ đệm

Kỹ thuật loại bỏ ba đối tượng (triple culling) đảm bảo GPU không lãng phí tài nguyên khi hiển thị các đối tượng nằm ngoài tầm nhìn. Kết hợp với hiển thị không theo thời gian thực và vẽ được lưu vào bộ nhớ đệm, hiệu năng được đẩy đến mức tối đa.

Tính toàn vẹn dữ liệu: Điều gây ấn tượng nhất với khách hàng BIM

Sau khi hầu hết các giải pháp chuyển đổi định dạng được thực hiện, mô hình trở thành một tập hợp các "lưới rỗng". Bạn nhấp vào một thành phần và chương trình thậm chí không biết nó là gì — một bức tường? Một cột? Một đường ống? Tất cả đều biến mất.

rapid3D Loader thì khác. Thông qua các plugin xuất chuyên dụng (mỗi plugin dành cho Revit, Bentley, Tekla, Rhino, Navisworks, SolidWorks, Inventor, Siemens NX và PTC Creo), nó bảo toàn ID thành phần, mối quan hệ phân cấp, thông số vật liệu và thuộc tính chuyên nghiệp cùng với việc trích xuất dữ liệu hình học, lưu trữ chúng trong các tệp cơ sở dữ liệu với cấu trúc bảng được công khai.

Điều này cho phép bạn làm những việc như sau:

// Chọn một thành phần const mesh = pickMesh (event); const componentId = mesh.userData.componentId ; // Truy vấn đầy đủ thuộc tính từ tệp cơ sở dữ liệu const properties = await dbLoader.getComponentProperties (componentId); console.log ( properties); // { // id: 'wall-001', // type: 'Structural Wall', // material: 'C30 Concrete', // thickness: 200, // mm // level: 'F2', // ... // } 

Điều này rất quan trọng đối với các ứng dụng BIM — người dùng có thể nhấp vào một cột và xem thông tin đầy đủ về thành phần.

Phần mềm hỗ trợ nhiều định dạng khác nhau: Revit, SolidWorks, Bentley, Tekla, IFC, FBX, STEP, 3DXML, skp, dae, stp, stl, iges, rvm, vue, obj — bao gồm tất cả các định dạng 3D phổ biến trong ngành.

VI. Quá trình tích hợp thực ra rất đơn giản

Toàn bộ quy trình chỉ gồm ba bước:

Bước 1: Tải xuống Trình tạo tập tin Opt

Cài đặt Trình tạo tập tin tùy chọn (Công cụ chuyển đổi định dạng mô hình) trên Windows, chọn tệp mô hình của bạn và chọn .opt là định dạng xuất. Mọi thứ đều được thực hiện cục bộ — không có gì được tải lên.

Tải xuống tại: https://www.opt3ds.com/ hoặc https://www.3dexpert.jp/

Bước 2: Cài đặt gói npm

npm install opt-rapid3d-loader 

Gói npm: https://www.npmjs.com/package/opt-rapid3d-loader

Bước 3: Viết một vài dòng mã

import { RapidLoader } from 'opt-rapid3d-loader' ; const scene = new THREE . Scene (); // ... mã khởi tạo Three.js của bạn ... const loader = new RapidLoader (); loader. load ( 'path/to/model.opt' , { onProgress : ( p ) => updateLoadingBar (p), onComplete : ( model ) => { scene. add (model); // Mỗi Mesh trong mô hình là một Mesh tiêu chuẩn của Three.js // Logic tương tác, shader, mã nghiệp vụ hiện có của bạn — không cần thay đổi } }); 

Loader tạo ra các đối tượng Mesh tiêu chuẩn của Three.js, có nghĩa là mọi thứ bạn đã viết trước đây đều hoàn toàn tương thích. Không cần phải bắt đầu lại từ đầu.

VII. Dữ liệu hiệu năng thực tế

Các bài kiểm tra được thực hiện trên cùng một máy (i7-12700 / 32GB RAM / RTX 3060 / Chrome 120):

Giải pháp gốc sử dụng GLTFLoader + nén Draco. Phiên bản 8.7GB gây ra lỗi hết bộ nhớ — thậm chí không khởi động được.

Cảm ơn Công nghệ tải LOD động đa cấpRapid3D Loader không cần phải đợi toàn bộ mô hình tải xong trước khi hiển thị màn hình ban đầu. Cả mô hình Revit 8,7GB và mô hình IFC 1,2GB đều tải trong vòng chưa đầy 10 giây. So với Three.js gốc, Tốc độ tải mô hình được cải thiện gấp 3 lần trở lên, và tốc độ khung hình khi hiển thị mô hình lớn được cải thiện gấp 10 lần trở lên.Số lượng lệnh vẽ (Draw Calls) giảm từ 12.000 xuống còn 380 — về mặt hình ảnh thì khó nhận thấy, nhưng độ ổn định của tốc độ khung hình thì khỏi phải bàn.

Vấn đề mà công ty tư vấn BIM không thể giải quyết đã được giải quyết dễ dàng với rapid3D Loader.

VIII. Các trường hợp sử dụng

Nếu dự án của bạn đáp ứng bất kỳ tiêu chí nào trong số này, bạn nên dành nửa giờ để thử bản demo:

• Cần tải các định dạng mô hình 3D/BIM chuyên nghiệp như Revit / SolidWorks / IFC.
• Tệp mô hình đơn lẻ có dung lượng vượt quá 500MB.
• Khách hàng có yêu cầu về bảo mật dữ liệu (không thể tải lên đám mây).
• Cần có khả năng tương tác ở cấp độ thành phần (nhấp chuột để truy vấn thuộc tính, chú thích màu sắc, hiển thị/ẩn, v.v.)
• Tôi không muốn bị ràng buộc vào một giải pháp "hộp đen" và cần tiếp tục phát triển dựa trên Three.js.

Các ngành công nghiệp áp dụng: Đóng tàu/Kỹ thuật hàng hải, Hàng không vũ trụ, Năng lượng & Điện lực, Hóa dầu, Sản xuất tiên tiến, Thành phố thông minh, Thiết kế kiến ​​trúc — về cơ bản là bất kỳ dự án trực quan hóa web nào sử dụng mô hình 3D chuyên nghiệp.

IX. Giới thiệu về Công ty TNHH Chuyên gia 3D

Công ty TNHH Chuyên gia 3D có trụ sở chính tại Osaka, Nhật Bản, với nhiều năm kinh nghiệm tích lũy trong lĩnh vực xử lý dữ liệu và mô hình 3D/BIM quy mô lớn chuyên nghiệp. Công ty cam kết thu hẹp khoảng cách kỹ thuật giữa các công cụ dựng hình 3D đa năng và dữ liệu cấp công nghiệp, cung cấp cho khách hàng một quy trình hoàn chỉnh từ chuyển đổi định dạng mô hình đến hiển thị web hiệu suất cao.

Trình tải rapid3D cho three.js Đây là sản phẩm cốt lõi của nhóm chuyên gia 3D — chuyển đổi định dạng, xử lý nhẹ, kết xuất hiệu năng cao và tương tác dữ liệu, tất cả trong một quy trình tích hợp. Và vì đầu ra là các đối tượng Mesh tiêu chuẩn của Three.js, bạn sẽ không bao giờ bị ràng buộc vào bất kỳ hệ sinh thái độc quyền nào.

Cách bắt đầu

Ngoài ra, các ví dụ minh họa và mã nguồn cũng được cung cấp để hướng dẫn sử dụng API cơ bản, trích xuất dữ liệu mô hình và phát triển mở rộng dựa trên các đối tượng Mesh của Three.js.

Sau khi tải xuống Trình tạo tệp Opt, hãy chọn .opt Định dạng xuất là , và gói rapid3D Loader JS có thể tải và hiển thị trực tiếp định dạng này.

X. Kết luận

Three.js là một công cụ tuyệt vời, nhưng nó được định vị là một công cụ dựng hình 3D đa năng, chứ không phải là một giải pháp BIM cấp công nghiệp. Khi đối mặt với dữ liệu công nghiệp thực tế, có cả một lớp công nghệ bị thiếu cần được bổ sung — và đó chính xác là những gì nhóm 3D Expert đã và đang nỗ lực thực hiện trong nhiều năm qua.

rapid3D Loader dành cho three.js đã giải quyết được vấn đề đó. Bài học lớn nhất sau khi sử dụng nó là: Cuối cùng bạn sẽ không còn phải vật lộn với các mô hình lớn nữa. Hãy tập trung vào việc viết logic nghiệp vụ, tập trung vào việc xây dựng các tương tác.

Nếu bạn cũng đang làm việc với hình ảnh hóa 3D trên web, chúng tôi rất muốn được nghe ý kiến ​​từ bạn. Hãy chia sẻ kinh nghiệm, những khó khăn bạn gặp phải, những giải pháp bạn đã thử — hãy cùng trò chuyện.

Công ty TNHH Chuyên gia 3D 📍 Osaka, Nhật Bản 🌐 https://www.opt3ds.com/ | https://www.3dexpert.jp/ 📦 npm: https://www.npmjs.com/package/opt-rapid3d-loader

© 2010–2026 Công ty TNHH Chuyên gia 3D. Bảo lưu mọi quyền.