I. 's Middags crashte de browser

Vorig jaar, een Bim Een technisch adviesbureau nam een ​​webvisualisatieproject aan voor de bouwsector. De eisen leken vrij eenvoudig: een door de klant aangeleverd Revit-model weergeven in de browser, met ondersteuning voor virtuele rondleidingen, doorklikken op componenten en inspectie van objecten.

Het projectteam dacht dat het simpel zou zijn. Installeer three.js, zoek een tool om .rvt-bestanden naar .rvt te converteren.GlbLaad het met GLTFLoader, klaar.

Vervolgens stuurde de klant de modelbestanden op.

Het gecomprimeerde archief was 12 GB groot.

Na extractie bleek één enkel hoofdmodelbestand al 8,7 GB groot te zijn. Het team besloot de knoop door te hakken en gebruikte een conventionele tool om het naar glTF te converteren. De conversie duurde 40 minuten en leverde een .glb-bestand van 6 GB op. Ze voegden het toe aan hun Three.js-project en—

De browser gaf direct een wit scherm weer.

De console had één regel: Geheugen niet meer beschikbaar.

Eerlijk gezegd was het team verbijsterd. Het was geen trage prestatie, het waren geen lage framesnelheden — het werkte helemaal niet.

II. De reddingspogingen (en waarom ze allemaal mislukten)

De volgende twee weken stortte het team zich op elk technisch forum dat ze konden vinden.

Poging 1: Draco-compressie

Ze comprimeerden het glTF-bestand met Draco en laadden het vervolgens in. Het bestand kromp van 6 GB naar 1,8 GB – dat zag er veelbelovend uit.

Maar het parsen door de hoofdthread van JavaScript duurde nog steeds meer dan 90 seconden, gedurende welke tijd de pagina volledig vastliep. Gebruikers moesten anderhalve minuut wachten na het openen van de webpagina. Dat kon niemand accepteren.

Poging 2: Handmatige LOD

Ze probeerden handmatig drie versies van het model met verschillende precisieniveaus in Blender te maken en schreven hun eigen code om tussen de versies te schakelen op basis van de afstand tot de camera. Dit verbeterde de situatie enigszins, maar het handmatig maken van drie versies van één model kostte bijna een hele dag. De klant had meer dan één model, dus deze aanpak was veel te inefficiënt. Bovendien had Blender zelf moeite met extreem grote modellen en crashte het programma zonder waarschuwing.

Poging 3: Cloudconversie

Ze probeerden een commercieel cloudplatform. Het uploaden van het model duurde twee uur, en na de conversie en het terugdownloaden was het grootste deel van de componenteigenschappen verdwenen. Gebruikers wilden op een muur kunnen klikken om materiaalinformatie te zien, maar ze kregen alleen een kaal mesh-object te zien. De eisen werden simpelweg niet waargemaakt.

Na bijna een maand ploeteren kwam het BIM-adviesbureau tot een moeilijk te verteren conclusie:

Er is niets mis met Three.js zelf. Het probleem is dat het te maken heeft met industriële 3D/BIM-data, en niet met game-assets. Dat zijn twee totaal verschillende werelden.

Omdat het BIM-adviesbureau het probleem niet met eigen team kon oplossen, wendde het zich tot 3D Expert Co.,Ltd.

III. De technische basis van 3D Expert

3D Expert Co.,Ltd., met hoofdkantoor in Osaka, Japan, heeft jarenlange expertise opgebouwd in de grootschalige, lichtgewicht verwerking van 3D/BIM-modellen en -gegevens. Dit is geen haastig in elkaar gezette oplossing; het team is al lange tijd diepgaand betrokken bij de kernaspecten van industriële 3D-dataverwerking, lichtgewicht verwerking en hoogwaardige webrendering, met een grondige kennis van de interne structuren van gangbare industriële formaten zoals Revit, IFC, SolidWorks en Bentley.

Na ontvangst van het hulpverzoek van het BIM-adviesbureau, identificeerde het 3D Expert-team snel het probleem. Tijdens hun analyse verdeelden ze de knelpunten waarmee Three.js te maken krijgt bij grote modellen in vier lagen:

Dit was niet iets wat met een patch bovenop Three.js opgelost kon worden; het vereiste structurele veranderingen aan de basis van de renderingpipeline. En dat was precies het gebied waar de jarenlange expertise van het 3D Expert-team lag.

IV. Vergelijking van beschikbare oplossingen

Het 3D Expert-team heeft alle mogelijke oplossingen bekeken:

Cloudoplossingen kennen een onvermijdelijke hindernis: data moet worden geüpload. Voor klanten in de bouwsector – die extreem gevoelig zijn voor gegevensbeveiliging – was dit in feite een dealbreaker. Bovendien waren de geconverteerde formaten black boxes, waardoor front-end ontwikkelaars geen mogelijkheden hadden om aanpassingen te maken.

Gebruikmakend van jarenlange technische ervaring, gaf het 3D Expert-team een ​​eigen antwoord: rapid3D Loader voor three.js.

V. Hoe rapid3D Loader voor three.js deze problemen oplost

rapid3D Loader voor three.js is geen wrapper rond Three.js, en ook geen simpel hulpmiddel voor formaatconversie. Het is een complete pipeline, van modelconversie tot front-end rendering.

Architectuur: Producent-Consument

┌──────────────────────────────┐ ┌──────────────────────────────────────┐ │ Opt-bestandgenerator (Producent)│ ────► │ rapid3D Loader JS Pakket │ │ │ │ (Consument) │ │ · Draait lokaal, geen cloud │ │ · Gepubliceerd als npm-pakket │ │ uploads │ │ · In te sluiten in Three.js-projecten │ │ · Native parsing van meer dan 20 │ │ · Parallel laden met meerdere workers │ │ formaten │ │ · Dynamisch laden van meerdere LOD-niveaus │ │ · Genereert .opt-geometrie │ │ · Chunk-rendering + geïnstantieerde │ │ bestanden │ │ rendering │ │ · Genereert .db-eigenschappen │ │ · Open API-interface │ │ databases │ │ │ │ · Windows-versie beschikbaar │ │ │ │ om te downloaden │ │ │ └──────────────────────────────┘ └────────────────────────────────────┘ 

De belangrijkste voordelen van deze architectuur:

• De conversie vindt lokaal plaats op de computer van de gebruiker. — Kerngegevens verlaten nooit de computer van de klant, waardoor direct aan de beveiligings- en compliance-eisen wordt voldaan.
• De front-end ontvangt vooraf geoptimaliseerde gegevens. .opt-formaat bestanden, waardoor het niet meer nodig is om de gegevens opnieuw te parsen in de browser.
• Geometrische gegevens en eigenschapsgegevens worden apart opgeslagen. — .opt verzorgt de weergave, .db de zakelijke dataquery's; beide laden op aanvraag zonder de andere te vertragen.

Vier kerntechnologieën die de prestaties naar een hoger niveau tillen.

1. Laden van een wachtrij met meerdere workers

// Native Three.js laden van grote bestanden: single-threaded, bevroren wanneer het bevroren is. const loader = new GLTFLoader (); loader.load ( 'model.glb' , ( gltf ) => { // Deze stap kan 90 seconden duren, gedurende welke de pagina volledig onresponsief is . scene.add ( gltf.scene ); }); // rapid3D Loader: parallelle verwerking met meerdere workers onder de motorkap . // De API is even eenvoudig, maar worker threads worden intern automatisch toegewezen . rapidLoader.load ( 'model.opt' , { onProgress : ( percent ) => console.log ( ` ${percent} %` ); // Voortgangsfeedback beschikbaar. }); 

Het parsen van grote bestanden wordt opgesplitst in parallelle taken, waarbij optimaal gebruik wordt gemaakt van multi-core CPU's. Ontwikkelaars hoeven de worker threads niet handmatig te beheren.

2. Dynamische LOD-lading op meerdere niveaus

Dit is de kerntechnologie achter de laadmogelijkheid van rapid3D Loader in minder dan een seconde. In plaats van het hele model in één keer in het geheugen te laden, laadt het dynamisch modelgegevens op verschillende precisieniveaus, afhankelijk van het camerastandpunt en de afstand. Wat de gebruiker ziet, wordt geladen; wat niet zichtbaar is, verbruikt geen resources.

Dit betekent dat gebruikers, zelfs bij een Revit-model van 8,7 GB, niet hoeven te wachten tot het hele bestand is geladen. De gegevens die nodig zijn voor de eerste schermweergave zijn minimaal, waardoor de laadtijden onder de 10 seconden blijven. Van een overzichtsfoto van de hele campus tot een close-up van een enkele schroef, het LOD-laadsysteem plant dynamisch modelbronnen in op verschillende precisieniveaus op basis van de camera-afstand, de schermgrootte en de bewegingssnelheid, met behoud van stabiele framesnelheden.

3. Chunkrendering + Instancerendering

Veel onderdelen in grote modellen zijn repetitief — een kantoorgebouw kan bijvoorbeeld 200 identieke ramen hebben. De traditionele aanpak wijst één Draw Call toe aan elk raam, wat resulteert in 200 aanroepen. Chunk rendering verdeelt de scènegrafiek in beheersbare render-eenheden en, in combinatie met GPU instanced rendering, vereisen dezelfde 200 ramen slechts een handvol Draw Calls.

4. Frustum Culling + Dynamische Culling + Gecachede tekening

Triple culling zorgt ervoor dat de GPU geen resources verspilt aan het renderen van objecten buiten het gezichtsveld. In combinatie met niet-realtime rendering en het gebruik van cached drawing wordt de prestatie tot het uiterste gedreven.

Gegevensintegriteit: wat BIM-klanten het meest imponeert

Na de meeste oplossingen voor formaatconversie verandert het model in een verzameling "holle meshes". Je klikt op een component en het programma weet niet eens meer wat het is: een muur? Een kolom? Een pijp? Alles is verloren.

rapid3D Loader is anders. Dankzij speciale exportplugins (één voor elk van de volgende programma's: Revit, Bentley, Tekla, Rhino, Navisworks, SolidWorks, Inventor, Siemens NX en PTC Creo) behoudt het component-ID's, hiërarchische relaties, materiaalparameters en professionele eigenschappen, naast de extractie van geometrische gegevens. Deze worden opgeslagen in databasebestanden met openbaar gedocumenteerde tabelstructuren.

Dit stelt je in staat om dingen zoals dit te doen:

// Selecteer een component const mesh = pickMesh (event); const componentId = mesh.userData.componentId ; // Vraag de volledige eigenschappen op uit het DB-bestand const properties = await dbLoader.getComponentProperties (componentId); console.log (properties); // { // id: 'wall-001', // type: 'Structural Wall', // material: 'C30 Concrete', // thickness: 200, // mm // level: 'F2', // ... // } 

Dit is cruciaal voor BIM-toepassingen: gebruikers kunnen op een kolom klikken en alle componentinformatie bekijken.

Het aanbod aan ondersteunde formaten is zeer uitgebreid: Revit, SolidWorks, Bentley, Tekla, IFC, FBX, STEP, 3DXML, skp, dae, stp, stl, iges, rvm, vue, obj — waarmee alle gangbare industriële 3D-formaten worden ondersteund.

VI. Integratie is eigenlijk heel eenvoudig

Het hele proces bestaat uit slechts drie stappen:

Stap 1: Download de .op-bestandgenerator

Installeren .op-bestandgenerator (hulpprogramma voor het converteren van modelformaten) selecteer in Windows uw modelbestand en kies .opt als exportformaat. Alles gebeurt lokaal — er wordt niets geüpload.

Downloaden via: https://www.opt3ds.com/ of https://www.3dexpert.jp/

Stap 2: Installeer het npm-pakket

npm install opt-rapid3d-loader 

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

Stap 3: Schrijf een paar regels code

import { RapidLoader } from 'opt-rapid3d-loader' ; const scene = new THREE.Scene (); // ... je Three.js initialisatiecode ... const loader = new RapidLoader (); loader.load ( 'path/to/model.opt' , { onProgress : ( p ) => updateLoadingBar (p), onComplete : ( model ) => { scene.add (model); // Elk mesh in het model is een standaard Three.js mesh // Je bestaande interactielogica, shaders, bedrijfslogica — geen wijzigingen nodig } }); 

De Loader produceert standaard Three.js Mesh-objecten, wat betekent dat alles wat je eerder hebt geschreven volledig compatibel is. Je hoeft niet opnieuw te beginnen.

VII. Prestatiegegevens uit de praktijk

Tests uitgevoerd op dezelfde machine (i7-12700 / 32 GB RAM / RTX 3060 / Chrome 120):

De native oplossing maakte gebruik van GLTFLoader + Draco-compressie. Het 8,7 GB-model veroorzaakte een geheugenprobleem — het startte zelfs niet op.

Met dank aan dynamische LOD-laadtechnologie op meerdere niveausRapid3D Loader hoeft niet te wachten tot het hele model is geladen voordat het beginscherm wordt weergegeven. Zowel het 8,7 GB Revit-model als het 1,2 GB IFC-model laden in minder dan 10 seconden. In vergelijking met native Three.js, De laadsnelheid van modellen verbetert met een factor 3 of meer, en de framesnelheid bij het renderen van grote modellen verbetert met een factor 10 of meer.Het aantal draw calls daalde van 12.000 naar 380 — visueel niet te onderscheiden, maar de stabiliteit van de framesnelheid spreekt voor zich.

Het probleem dat het BIM-adviesbureau niet kon oplossen, werd moeiteloos verholpen met rapid3D Loader.

VIII. Gebruiksscenario's

Als uw project aan een van deze criteria voldoet, is het de moeite waard om een ​​half uurtje te besteden aan het uitproberen van een demo:

• Het is nodig om professionele 3D/BIM-modelformaten zoals Revit, SolidWorks en IFC te laden.
• Een enkel modelbestand is groter dan 500 MB.
• De klant heeft specifieke eisen met betrekking tot gegevensbeveiliging (uploaden naar de cloud is niet toegestaan).
• Interactie op componentniveau is vereist (klikken om eigenschappen op te vragen, kleuraanduiding, tonen/verbergen, enz.).
• Ik wil niet vastzitten aan een ondoorzichtige oplossing en moet blijven ontwikkelen op basis van Three.js.

Toepasselijke sectorenScheepsbouw/Maritieme Techniek, Lucht- en Ruimtevaart, Energie & Elektriciteit, Petrochemie, Geavanceerde Productie, Slimme Steden, Architectonisch Ontwerp — in principe elk webvisualisatieproject dat gebruikmaakt van professionele 3D-modellen.

IX. Over 3D Expert Co.,Ltd.

3D Expert Co.,Ltd. is gevestigd in Osaka, Japan, en heeft jarenlange expertise opgebouwd in de professionele, grootschalige verwerking van 3D/BIM-modellen en -data. Het bedrijf streeft ernaar de technische kloof te overbruggen tussen algemene 3D-renderingengines en industriële data, en biedt klanten een complete workflow, van modelconversie tot hoogwaardige webrendering.

rapid3D Loader voor three.js Het kernproduct van het 3D Expert-team is Three.js: formaatconversie, lichte verwerking, hoogwaardige rendering en data-interactie, allemaal in één geïntegreerde pipeline. En omdat de output standaard Three.js Mesh-objecten zijn, zit je nooit vast aan een eigen ecosysteem.

Hoe begin je?

Daarnaast worden voorbeelddemo's en broncode aangeboden voor basisgebruik van de API, het extraheren van modelgegevens en verdere ontwikkeling op basis van Three.js Mesh-objecten.

Na het downloaden van Op file Generator, selecteer .opt als exportformaat, en het rapid3D Loader JS-pakket kan het direct laden en renderen.

X. Conclusie

Three.js is een geweldige tool, maar het is gepositioneerd als een algemene 3D-renderingengine, niet als een industriële BIM-oplossing. Bij het werken met echte industriële data ontbreekt er een hele laag technologie die moet worden aangevuld – en dat is precies waar het 3D Expert-team al jaren aan werkt.

rapid3D Loader voor three.js vult die leemte op. De belangrijkste conclusie na het gebruik ervan: Je stopt eindelijk met worstelen met grote modellen. Concentreer je op het schrijven van bedrijfslogica, concentreer je op het bouwen van interacties.

Als je ook aan 3D-visualisatie voor het web werkt, horen we graag van je. Deel je ervaringen, de valkuilen waar je tegenaan bent gelopen, de oplossingen die je hebt geprobeerd – laten we erover praten.

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

© 2010–2026 3D Expert Co.,Ltd. Alle rechten voorbehouden.