I. Po południu przeglądarka się zawiesiła

W zeszłym roku Bim Firma doradztwa technicznego podjęła się projektu wizualizacji internetowej dla branży budowlanej. Wymagania wydawały się dość proste: wyświetlanie modelu Revit dostarczonego przez klienta w przeglądarce, z obsługą nawigacji, klikania komponentów i inspekcji właściwości.

Zespół projektu myślał, że to proste. Zainstaluj three.js i znajdź narzędzie do konwersji .rvt na .Glb, załaduj za pomocą GLTFLoader i gotowe.

Następnie klient przesłał pliki modelu.

Skompresowane archiwum miało rozmiar 12 GB.

Po ekstrakcji, sam pojedynczy plik modelu głównego miał rozmiar 8,7 GB. Zespół podjął się tego zadania i użył konwencjonalnego narzędzia do konwersji do formatu glTF — konwersja trwała 40 minut i wygenerowała plik .glb o rozmiarze 6 GB. Umieścili go w swoim projekcie Three.js i…

Przeglądarka od razu przeszła do białego ekranu.

Konsola miała jedną linijkę: Brak pamięci.

Szczerze mówiąc, zespół był oszołomiony. Nie chodziło o niską wydajność, nie chodziło o niską liczbę klatek na sekundę – gra w ogóle nie działała.

II. Próby ratunkowe (i dlaczego wszystkie się nie powiodły)

Przez kolejne dwa tygodnie zespół przeglądał wszystkie fora techniczne, jakie udało mu się znaleźć.

Próba 1: Kompresja Draco

Skompresowali plik glTF za pomocą Draco, a następnie go załadowali. Rozmiar pliku zmniejszył się z 6 GB do 1,8 GB — wyglądało to obiecująco.

Jednak analiza głównego wątku JS i tak trwała ponad 90 sekund, podczas których strona była całkowicie zamrożona. Użytkownicy musieli czekać półtorej minuty po otwarciu strony. Nikt nie mógł się z tym pogodzić.

Próba 2: Ręczny LOD

Próbowali ręcznie stworzyć trzy wersje modelu o wysokiej precyzji w Blenderze i napisali własny kod, który przełączał się w zależności od odległości kamery. To nieco poprawiło sytuację — ale ręczne stworzenie trzech wersji jednego modelu zajmowało większą część dnia. Klient miał więcej niż jeden model, więc to podejście było zdecydowanie zbyt nieefektywne. Co więcej, sam Blender miał problemy z obsługą bardzo dużych modeli i zawieszał się bez ostrzeżenia.

Próba 3: Konwersja do chmury

Wypróbowali komercyjną platformę chmurową. Przesłanie modelu zajęło dwie godziny, a po konwersji i pobraniu go z powrotem — większość danych o właściwościach komponentów zniknęła. Użytkownicy chcieli kliknąć ścianę, aby zobaczyć informacje o materiale, ale otrzymywali jedynie pusty obiekt Mesh. Wymagania po prostu nie zostały spełnione.

Po prawie miesiącu zmagań firma konsultingowa BIM doszła do trudnego do przełknięcia wniosku:

Z samym Three.js nie ma żadnych problemów. Problem polega na tym, że korzysta z danych 3D/BIM klasy przemysłowej, a nie z zasobów gier. To dwa zupełnie różne światy.

Nie mogąc rozwiązać problemu samodzielnie, firma konsultingowa BIM zwróciła się do 3D Expert Co.,Ltd.

III. Podstawy techniczne eksperta 3D

Firma 3D Expert Co.,Ltd. z siedzibą w Osace w Japonii posiada wieloletnie doświadczenie w dziedzinie modelowania 3D/BIM na dużą skalę oraz lekkiego przetwarzania danych. Nie było to rozwiązanie stworzone na szybko — zespół od dawna zajmuje się kluczowymi aspektami przemysłowej analizy danych 3D, lekkiego przetwarzania i wysokowydajnego renderowania stron internetowych, dysponując dogłębną wiedzą na temat wewnętrznych struktur popularnych formatów przemysłowych, takich jak Revit, IFC, SolidWorks i Bentley.

Po otrzymaniu prośby o pomoc od firmy konsultingowej BIM, zespół ekspertów 3D szybko zidentyfikował problem. Podczas analizy podzielili wąskie gardła, z którymi Three.js styka się w przypadku dużych modeli, na cztery warstwy:

Nie było to coś, co mogłaby naprawić łatka nałożona na Three.js — wymagało to zmian strukturalnych w samym fundamencie potoku renderowania. I właśnie w tym obszarze tkwiło wieloletnie doświadczenie zespołu 3D Expert.

IV. Porównanie dostępnych rozwiązań

Zespół ekspertów 3D przeanalizował każde rozwiązanie, jakie udało im się znaleźć:

Rozwiązania chmurowe mają nieuniknioną przeszkodę: konieczność przesłania danych. Dla klientów z branży budowlanej – którzy są niezwykle wyczuleni na punkcie bezpieczeństwa danych – stanowiło to zasadniczy czynnik decydujący o ich wyborze. Co więcej, konwertowane formaty były czarnymi skrzynkami, uniemożliwiając programistom front-end dostosowanie ich do swoich potrzeb.

Opierając się na wieloletnim dorobku technicznym, zespół ekspertów 3D przedstawił własną odpowiedź: rapid3D Loader dla three.js.

V. W jaki sposób rapid3D Loader dla three.js rozwiązuje te problemy

rapid3D Loader dla three.js nie jest wrapperem dla Three.js ani prostym narzędziem do konwersji formatów. To kompletny proces od konwersji modelu do renderowania front-end.

Architektura: Producent-Konsument

┌─────────────────────────────┐ ┌───────────────────────────────┐ │ Generator plików Opt (Producent)│ ────► │ rapid3D Pakiet Loader JS │ │ │ │ (Konsument) │ │ · Działa lokalnie, bez chmury │ │ · Opublikowany jako pakiet npm │ │ przesyła │ │ · Osadza w projektach Three.js │ │ · Natywne parsowanie 20+ │ │ · Równoległe ładowanie wielu procesów roboczych │ │ formatów │ │ · Wielopoziomowe dynamiczne ładowanie LOD │ │ · Generuje geometrię .opt │ │ · Renderowanie fragmentów + instancje │ │ plików │ │ renderowanie │ │ · Generuje właściwość .db │ │ · Otwarty interfejs API │ │ baz danych │ │ │ │ · Dostępna wersja na system Windows │ │ │ │ do pobrania │ │ │ └───────────────────────────────┘ └────────────────────────────────────┘ 

Główne zalety tej architektury:

• Konwersja odbywa się lokalnie na komputerze użytkownika — podstawowe dane nigdy nie opuszczają komputera klienta, spełniając wymogi bezpieczeństwa i zgodności natychmiast.
• Front-end otrzymuje wstępnie zoptymalizowane Format .opt plików, eliminując potrzebę ponownej, intensywnej analizy w przeglądarce.
• Dane geometryczne i dane dotyczące właściwości są przechowywane oddzielnie — .opt obsługuje renderowanie, .db obsługuje zapytania o dane biznesowe, każdy z nich ładuje się na żądanie, nie spowalniając pozostałych.

Cztery podstawowe technologie, które zwiększają wydajność

1. Ładowanie kolejki wieloetapowej

// Natywny Three.js ładuje duże pliki: jednowątkowy, zawieszony po zawieszeniu const loader = new GLTFLoader (); loader. load ( 'model.glb' , ( gltf ) => { // Ten krok może trwać 90 sekund, podczas których strona całkowicie nie odpowiada scene. add (gltf. scene ); }); // rapid3D Loader: równoległe przetwarzanie wielu wątków roboczych w tle // API jest równie proste, ale wątki robocze są automatycznie przypisywane wewnętrznie rapidLoader. load ( 'model.opt' , { onProgress : ( percent ) => console . log ( ` ${percent} %` ) // Dostępne informacje zwrotne o postępie }); 

Analiza dużych plików jest dzielona na zadania równoległe, w pełni wykorzystujące procesory wielordzeniowe. Deweloperzy nie muszą ręcznie zarządzać wątkami roboczymi.

2. Wielopoziomowe dynamiczne ładowanie LOD

To kluczowa technologia, która umożliwia ładowanie modelu w czasie poniżej sekundy. Zamiast ładować cały model do pamięci na raz, program dynamicznie ładuje dane modelu z różnymi poziomami precyzji, w zależności od punktu widzenia kamery i odległości. To, co widzi użytkownik, jest ładowane; to, co nie jest widoczne, nie zużywa zasobów.

Oznacza to, że nawet w przypadku modelu Revit o rozmiarze 8,7 GB użytkownicy nie muszą czekać na załadowanie całego pliku – dane potrzebne do początkowej prezentacji na ekranie są minimalne, co pozwala na utrzymanie czasu ładowania poniżej 10 sekund. Od widoku z lotu ptaka na cały kampus po zbliżenie pojedynczej śruby, wielopoziomowy system ładowania LOD dynamicznie planuje zasoby modelu z różnymi poziomami precyzji w oparciu o odległość kamery, powierzchnię ekranu i prędkość ruchu, utrzymując stabilną liczbę klatek na sekundę przez cały czas.

3. Renderowanie fragmentów + renderowanie instancji

Wiele komponentów w dużych modelach jest powtarzalnych — na przykład budynek biurowy może mieć 200 identycznych okien. Tradycyjne podejście przypisuje jedno wywołanie rysowania do każdego okna, co daje 200 wywołań. Renderowanie fragmentowe dzieli graf sceny na łatwe do zarządzania jednostki renderujące, a w połączeniu z renderowaniem instancyjnym GPU, te same 200 okien wymaga tylko kilku wywołań rysowania.

4. Selekcja ściętego stożka + Selekcja dynamiczna + Rysowanie w pamięci podręcznej

Potrójne odrzucanie gwarantuje, że GPU nie marnuje zasobów na renderowanie elementów poza polem widzenia. W połączeniu z renderowaniem w czasie nierzeczywistym i rysowaniem w pamięci podręcznej, wydajność osiąga swoje granice.

Integralność danych: co najbardziej imponuje klientom BIM

Po zakończeniu większości konwersji formatów model staje się zbiorem „pustych siatek”. Klikasz komponent, a program nawet nie wie, co to jest — ściana? Słup? Rura? Wszystko stracone.

rapid3D Loader jest inny. Dzięki dedykowanym wtyczkom eksportowym (po jednej dla Revit, Bentley, Tekla, Rhino, Navisworks, SolidWorks, Inventor, Siemens NX i PTC Creo) zachowuje identyfikatory komponentów, relacje hierarchiczne, parametry materiałów i profesjonalne właściwości, a także ekstrakcję danych geometrycznych, przechowując je w plikach bazy danych z publicznie udokumentowanymi strukturami tabel.

Dzięki temu możesz wykonywać następujące czynności:

// Wybierz komponent const mesh = pickMesh (event); const componentId = mesh. userData . componentId ; // Zapytanie o kompletne właściwości z pliku bazy danych const properties = wait dbLoader. getComponentProperties (componentId); console . log (properties); // { // id: 'wall-001', // typ: 'Ściana konstrukcyjna', // materiał: 'Beton C30', // grubość: 200, // mm // poziom: 'F2', // ... // } 

Ma to kluczowe znaczenie w przypadku aplikacji BIM — użytkownicy mogą kliknąć kolumnę i wyświetlić pełne informacje o komponencie.

Obsługiwane formaty są bardzo szerokie: Revit, SolidWorks, Bentley, Tekla, IFC, FBX, STEP, 3DXML, skp, dae, stp, stl, iges, rvm, vue, obj — obejmują wszystkie najpopularniejsze przemysłowe formaty 3D.

VI. Integracja jest w rzeczywistości prosta

Cały proces składa się zaledwie z trzech kroków:

Krok 1: Pobierz generator plików Opt

Zainstalować Generator plików opt (narzędzie do konwersji formatu modelu) w systemie Windows, wybierz plik modelu i wybierz .optować jako format eksportu. Wszystko odbywa się lokalnie — nic nie jest przesyłane.

Pobierz tutaj: https://www.opt3ds.com/ Lub https://www.3dexpert.jp/

Krok 2: Zainstaluj pakiet npm

npm install opt-rapid3d-loader 

pakiet npm: https://www.npmjs.com/package/opt-rapid3d-loader

Krok 3: Napisz kilka linijek kodu

import { RapidLoader } from 'opt-rapid3d-loader' ; const scene = new THREE . Scene (); // ... twój kod inicjalizacji Three.js ... const loader = new RapidLoader (); loader.load ( 'path/to/model.opt' , { onProgress : ( p ) => updateLoadingBar (p), onComplete : ( model ) => { scene.add (model); // Każda siatka w modelu jest standardową siatką Three.js // Twoja istniejąca logika interakcji, shadery, kod biznesowy — nie są wymagane żadne zmiany } }); 

Loader generuje standardowe obiekty Three.js Mesh, co oznacza, że ​​wszystko, co napisałeś wcześniej, jest w pełni kompatybilne. Nie musisz zaczynać od nowa.

VII. Dane dotyczące wydajności w warunkach rzeczywistych

Testy przeprowadzone na tym samym komputerze (i7-12700 / 32 GB RAM / RTX 3060 / Chrome 120):

Rozwiązanie natywne wykorzystywało kompresję GLTFLoader i Draco. Model 8,7 GB powodował błąd braku pamięci — w ogóle się nie uruchamiał.

Dzięki technologia wielopoziomowego dynamicznego ładowania LODRapid3D Loader nie musi czekać na załadowanie całego modelu przed renderowaniem ekranu początkowego. Zarówno model Revit o rozmiarze 8,7 GB, jak i model IFC o rozmiarze 1,2 GB ładują się w mniej niż 10 sekund. W porównaniu z natywnym Three.js, prędkość ładowania modelu poprawia się 3-krotnie lub więcej, a szybkość renderowania dużych modeli poprawia się 10-krotnie lub więcej. Liczba wywołań rysowania spadła z 12 000 do 380 — wizualnie nie do odróżnienia, ale stabilność liczby klatek na sekundę mówi sama za siebie.

Problem, którego nie mogła rozwiązać firma konsultingowa BIM, został bezproblemowo rozwiązany dzięki rapid3D Loader.

VIII. Przypadki użycia

Jeśli Twój projekt spełnia którekolwiek z poniższych kryteriów, warto poświęcić pół godziny na wypróbowanie wersji demonstracyjnej:

• Konieczność załadowania profesjonalnych formatów modeli 3D/BIM, takich jak Revit/SolidWorks/IFC
• Pojedynczy plik modelu przekracza 500 MB
• Klient ma wymagania dotyczące bezpieczeństwa danych (nie może przesyłać danych do chmury)
• Wymagana jest interakcja na poziomie komponentów (kliknij, aby zapytać o właściwości, adnotacje kolorystyczne, pokaż/ukryj itp.)
• Nie chcesz być ograniczony do rozwiązania typu „black-box” i musisz nadal rozwijać się w oparciu o Three.js

Zastosowane branże: Budownictwo okrętowe/inżynieria morska, przemysł lotniczy i kosmiczny, energetyka, petrochemia, zaawansowana produkcja, inteligentne miasta, projektowanie architektoniczne — w zasadzie każdy projekt wizualizacji internetowej z wykorzystaniem profesjonalnych modeli 3D.

IX. Informacje o firmie 3D Expert Co.,Ltd.

Firma 3D Expert Co.,Ltd. ma siedzibę w Osace w Japonii i może pochwalić się wieloletnim doświadczeniem w profesjonalnym, wielkoskalowym modelowaniu 3D/BIM oraz lekkim przetwarzaniu danych. Firma dąży do wypełnienia luki technicznej między uniwersalnymi silnikami renderującymi 3D a danymi klasy przemysłowej, zapewniając klientom kompleksowy proces, od konwersji formatu modelu po wysokowydajne renderowanie internetowe.

rapid3D Loader dla three.js to główny produkt zespołu ekspertów 3D — konwersja formatów, lekkie przetwarzanie, wysokowydajne renderowanie i interakcja z danymi, wszystko w jednym zintegrowanym procesie. A ponieważ dane wyjściowe to standardowe obiekty Three.js Mesh, nigdy nie jesteś ograniczony do żadnego zastrzeżonego ekosystemu.

Jak zacząć

Dodatkowo dostępne są przykładowe wersje demonstracyjne i kod źródłowy do podstawowego wykorzystania interfejsu API, ekstrakcji danych z modeli i rozszerzonego rozwoju w oparciu o obiekty Three.js Mesh.

Po pobraniu Generatora plików Opt wybierz .optować jako format eksportu, a pakiet rapid3D Loader JS może go bezpośrednio załadować i renderować.

X. Wnioski

Three.js to świetne narzędzie, ale jest pozycjonowane jako uniwersalny silnik renderujący 3D, a nie rozwiązanie BIM klasy przemysłowej. W przypadku rzeczywistych danych przemysłowych istnieje cała warstwa brakujących technologii, którą należy uzupełnić — i właśnie nad tym zespół ekspertów 3D pracuje od lat.

rapid3D Loader dla three.js wypełnia tę lukę. Najważniejsze wnioski po jego użyciu: Przestań wreszcie walczyć z dużymi modelami. Skup się na pisaniu logiki biznesowej, skup się na budowaniu interakcji.

Jeśli Ty również zajmujesz się wizualizacją internetową 3D, chętnie się z Tobą skontaktujemy. Podziel się swoimi doświadczeniami, napotkanymi pułapkami i wypróbowanymi rozwiązaniami — porozmawiajmy.

3D Expert Co., Ltd. 📍 Osaka, Japonia 🌐 https://www.opt3ds.com/ | https://www.3dexpert.jp/ 📦 npm: https://www.npmjs.com/package/opt-rapid3d-loader

© 2010–2026 3D Expert Co.,Ltd. Wszelkie prawa zastrzeżone.