Zo zet je een 3D-CAD-model op je website: 4 manieren vergeleken

Om een 3D-CAD-model op je website te zetten, exporteer je de assemblage als STEP-bestand, zet je die om in een licht weergavemodel in glTF- of GLB-formaat en toon je dat model in een webviewer op je productpagina. Je CAD-bestand zelf hoeft nooit gepubliceerd te worden: de browser downloadt alleen het weergavemodel. Voor de ICM-21 van Tutamen, een verdeelblok voor koelvloeistof met 42 onderdelen, is dat een download van 2,0 MB, gemaakt van het STEP-bestand.

STEP is het neutrale 3D-bestand dat elk gangbaar CAD-systeem kan exporteren (ISO 10303). glTF is het open formaat voor 3D op het web, van de Khronos Group, en GLB is glTF in één bestand. De vier manieren om van het ene naar het andere te komen, verschillen vooral in wat je koper kan doen, wat je uit handen geeft en wie het werkend houdt.

Waarom kan een website een STEP-bestand niet direct tonen?

Een STEP-bestand beschrijft een product als exacte wiskundige oppervlakken, en een browser kan alleen platte driehoeken tekenen. Elk vlak moet eerst worden bedekt met kleine driehoeken (de polygonen die mensen bedoelen met een “mesh”), een stap die tessellatie heet. Meer driehoeken maken rondingen gladder en het bestand groter, dus een goede converter stopt waar rondingen er op volledig scherm glad uitzien.

De conversie bepaalt ook wat de pagina kan. Een goed weergavemodel houdt elk onderdeel apart, met een naam en een materiaal, zodat de assemblage uit elkaar kan en elk onderdeel aanklikbaar is. Herhaalde onderdelen slaat het één keer op: het bestand van de ICM-21 bevat 214.168 driehoeken en het scherm tekent er 654.948. Het bevat geen modelboom, schetsen of parameters, dus waarden zoals massa en volume worden eerst in de exacte CAD gemeten, en een goede pagina vermeldt dat de datasheet leidend is waar de twee verschillen.

Dit leverde de keten op voor de vier live modellen van Proofscene, gemeten aan de bestanden die hun pagina's laden:

De download is waar een bezoeker op wacht; de pagina en de viewer eromheen voegen ongeveer een halve megabyte toe. *STRAVIK, HALVORN en ARTIXO zijn fictieve merken die Proofscene zelf heeft gemodelleerd om andere branches te laten zien; de ICM-21 is het echte product van Tutamen, gebouwd vanuit het STEP-bestand.

Wat zijn de vier manieren om een CAD-model op je website te zetten?

De vier manieren zijn de embed van een gratis online viewer, een gehost 3D-platform of een configurator, een pagina die je zelf bouwt op een open webcomponent zoals model-viewer van Google, en een interactieve productpagina die vanuit de CAD voor je wordt gebouwd. Hieronder vergelijken we ze op de punten die voor een industrieel product de doorslag geven:

Welke route past bij je product?

Een gratis viewer past bij een snelle blik op één onderdeel voor één klant. Het is de snelste route, en je geeft er het meest mee uit handen, want een gratis CAD-viewer werkt vanuit je STEP-bestand zelf.

Een gehost platform past bij producten die op uiterlijk en opties worden verkocht, waarbij een koper een kleur of maat kiest. Die koper kiest ze in een configurator.

Zelf bouwen met model-viewer, de gratis webcomponent van Google op basis van de three.js-bibliotheek, past bij een webteam met tijd en bij eenvoudige onderdelen die alleen hoeven te draaien. Draaien, labels en AR gaan er goed mee. Daar staat tegenover dat je elk product converteert, vereenvoudigt, belicht en test, opnieuw bij elke wijziging, en dat een doorsnede, een röntgenmodus of een klikbare onderdelenlijst code is die je zelf schrijft.

Een interactieve productpagina op maat past bij technische producten waarvan de waarde in de behuizing zit (pompen, kleppen, verdeelblokken, robotgewrichten) en bij kopers die elk getal controleren. Proofscene bouwt de pagina in je eigen site in, als één iframe-tag of als gehoste pagina op jouwmerk.proofscene.com; de ICM-21 van Tutamen stond live op de dag dat het STEP-bestand binnenkwam.

Hoort je product in die laatste groep, stuur dan het STEP-bestand en de datasheet en laat je product in 3D bouwen. Productpagina's op maat zitten in Proofscene Business en Enterprise, en ons team vertelt je wat het gaat bouwen en wanneer het live staat, nog voordat het werk begint.

Wat moeten kopers met het model kunnen doen?

Kopers van technische producten willen erin kunnen kijken en de cijfers controleren, dus met het model moeten ze het product uit elkaar kunnen halen, opensnijden, erdoorheen kijken en de gegevens van elk onderdeel lezen, niet alleen draaien. Elk van deze functies draait in een live model dat je nu kunt openen:

• Exploded view. De kogelkraan HALVORN BV25 valt in montagevolgorde uiteen in 14 onderdelen.
• Doorsnede en stroming. Snijd de pomp STRAVIK SX 50-160 doormidden en laat hem draaien bij elk debiet van 15 tot 40 m³/h.
• Röntgenweergave. Bekijk door de behuizing van het robotgewricht ARTIXO RA90 heen de motor, de strain-wave-overbrenging van 50:1 en het uitgangslager.
• Onderdeelgegevens en meten. Klik op een onderdeel van de Tutamen ICM-21 voor de naam, het materiaal en het aantal, meet tussen echte randen en laat de koelvloeistof stromen volgens de verdeling uit de datasheet.
• Delen. Een link en een QR-code voor elke weergave, en een korte rondleiding voor bezoekers die niet zelf op ontdekking gaan.

Van hetzelfde model kunnen ook lanceringsfilms worden gerenderd: zie 3D-productanimatie, of de film van 35 seconden waarin een interactieve 3D-productpagina in een browser uit elkaar wordt gehaald.

Hoe houd je een 3D-model snel op telefoons?

Houd de bestandsgrootte van het model op een paar megabyte, laad het wanneer de bezoeker erbij komt, en zorg dat de pagina ook zonder het model goed leest. Een model dat als eerste laadt, houdt de tekst en beelden op waarvoor kopers kwamen.

• Comprimeer het bestand. glTF kan getallen in minder bytes opslaan en geometrie samenpersen met de extensies Draco of meshopt, en de server hoort het gecomprimeerd te versturen. De modellen van Proofscene slaan oppervlakterichtingen op als getallen van 16 bit en worden met gzip verstuurd: de GLB van de ICM-21 is 3,6 MB en komt binnen als 2,0 MB.
• Gebruik driehoeken voor wat kopers bekijken. Schroefdraaddetails, piepkleine afrondingen en de binnenkant van onderdelen die niemand opent, kosten een telefoon tijd en voegen niets toe.
• Toon eerst een stilstaand beeld. Laad het 3D-model zodra het in beeld scrolt of na een tik; model-viewer doet dit met een posterafbeelding en lazy loading.
• Laat het scrollen vrij. De embeds van Proofscene scrollen mee met de pagina en zoomen alleen met Ctrl of een knijpgebaar, en op telefoons klappen de panelen in tot schuifpanelen, zodat het product zichtbaar blijft.
• Houd de feiten in de tekst. Zoekmachines en AI-assistenten lezen de pagina, niet het model, dus zet de beschrijving, onderdeelnamen en specificaties in de HTML. De openbare demopagina's van Proofscene voegen gestructureerde gegevens voor het 3D-model toe, en ook een browser zonder 3D krijgt die tekst.

Is je CAD veilig als het model op een openbare pagina staat?

Ja, want een weergavemodel is niet je CAD: het bevat driehoeken op schermnauwkeurigheid, zonder modelboom, schetsen, parameters of exacte oppervlakken, en zonder de interne details die je hebt weggelaten. Bescherm wat belangrijk is voordat je publiceert:

• Vereenvoudig of verwijder alles wat commercieel gevoelig is, zoals een intern kanaal of een afdichtingsprofiel.
• Upload het STEP-bestand nooit naar een viewer waar bezoekers het origineel kunnen downloaden.
• Beoordeel vóór de lancering via een link met wachtwoord, en teken een geheimhoudingsovereenkomst (NDA) met wie de CAD verwerkt. Proofscene werkt zo, en je CAD en je content blijven jouw eigendom.

Verder lezen

Lees hoe de ICM-21 van Tutamen van STEP-bestand tot live productpagina kwam, probeer alle vier de modellen op de pagina interactieve 3D-productdemo, of bekijk de film van 36 seconden waarin een 3D-productviewer op je website komt.