Jak umieścić model 3D z CAD na swojej stronie: 4 sposoby

Aby umieścić model 3D z CAD na stronie internetowej, wyeksportuj złożenie jako plik STEP, przekonwertuj je na lekki model do wyświetlania w formacie glTF lub GLB i pokaż ten model w przeglądarce 3D na stronie produktu. Samego pliku CAD nigdy nie musisz publikować: przeglądarka internetowa pobiera tylko model do wyświetlania, który dla kolektora chłodzenia cieczą ICM-21 firmy Tutamen, złożonego z 42 części, waży 2,0 MB i powstał z jego pliku STEP.

STEP to neutralny format 3D, do którego eksportuje każdy popularny system CAD (ISO 10303). glTF to otwarty format 3D dla internetu, opracowany przez Khronos Group, a GLB to glTF w jednym pliku. Cztery sposoby przejścia od jednego do drugiego różnią się głównie tym, co może zrobić kupujący, co przekazujesz i kto dba o to, żeby wszystko działało.

Dlaczego strona internetowa nie wyświetli pliku STEP bezpośrednio?

Plik STEP opisuje produkt jako dokładne powierzchnie matematyczne, a przeglądarka internetowa potrafi rysować tylko płaskie trójkąty. Każdą ścianę trzeba najpierw pokryć małymi trójkątami (to te wielokąty, które ludzie mają na myśli, mówiąc o „siatce”), a ten etap nazywa się teselacją. Więcej trójkątów to gładsze krzywizny i większy plik, dlatego dobry konwerter zatrzymuje się tam, gdzie krzywizny wyglądają gładko na pełnym ekranie.

Konwersja decyduje też o tym, co potrafi strona. Dobry model do wyświetlania zachowuje każdą część osobno, z nazwą i materiałem, więc złożenie można rozłożyć na części, a każdą część kliknąć. Powtarzające się części zapisuje tylko raz: plik ICM-21 zawiera 214 168 trójkątów, a ekran rysuje ich 654 948. Model nie ma drzewa operacji, szkiców ani parametrów, więc wartości takie jak masa i objętość mierzy się najpierw w dokładnym modelu CAD, a dobra strona informuje, że w razie różnic wiążąca jest karta katalogowa.

Oto wyniki tego procesu dla czterech interaktywnych modeli Proofscene, zmierzone na plikach, które wczytują ich strony:

Kolumna „Do pobrania” pokazuje, na ile danych czeka odwiedzający; strona i przeglądarka 3D dodają do tego około pół megabajta. *STRAVIK, HALVORN i ARTIXO to fikcyjne marki, które zespół Proofscene sam wymodelował, aby pokazać inne branże; ICM-21 to prawdziwy produkt firmy Tutamen, zbudowany z jego pliku STEP.

Jakie są cztery sposoby umieszczenia modelu CAD na stronie internetowej?

Cztery sposoby to kod do osadzenia z darmowej przeglądarki online, hostowana platforma 3D lub konfigurator, strona, którą budujesz samodzielnie na otwartym komponencie internetowym, takim jak model-viewer od Google, oraz interaktywna strona produktu zbudowana dla Ciebie z plików CAD. Tak wypadają w pytaniach, które przy produkcie przemysłowym przesądzają o wyborze:

Który sposób pasuje do Twojego produktu?

Darmowa przeglądarka sprawdzi się, gdy jeden klient ma szybko obejrzeć jedną część. To najszybszy sposób i zarazem ten, w którym przekazujesz najwięcej, bo darmowa przeglądarka CAD pracuje na samym Twoim pliku STEP.

Hostowana platforma pasuje do produktów sprzedawanych wyglądem i wariantami, w których kupujący wybiera kolor lub rozmiar. Taki kupujący wybiera je w konfiguratorze.

Samodzielne wdrożenie na model-viewer, darmowym komponencie internetowym Google opartym na bibliotece three.js, pasuje do zespołu webowego, który ma czas, i do prostych części, które wystarczy obracać. Dobrze radzi sobie z obracaniem, etykietami i AR. Kosztem jest konwersja, uproszczenie, oświetlenie i testy każdego produktu, ponownie przy każdej zmianie, a przekrój, tryb rentgenowski czy klikalna lista części to kod, który piszesz samodzielnie.

Interaktywna strona produktu zbudowana na zamówienie pasuje do urządzeń technicznych, których wartość kryje się wewnątrz obudowy (pompy, zawory, kolektory, przeguby robotów), i do kupujących, którzy sprawdzają każdą liczbę. Proofscene buduje ją w Twojej własnej witrynie, jako jeden znacznik iframe lub jako hostowaną stronę pod adresem twojamarka.proofscene.com; ICM-21 firmy Tutamen był online tego samego dnia, w którym dotarł jego plik STEP.

Jeśli Twój produkt należy do tej ostatniej grupy, wyślij plik STEP i kartę katalogową: pokaż swój produkt w 3D. Strony produktów na zamówienie są w cenie planów Proofscene Business i Enterprise, a zanim zacznie się jakakolwiek praca, nasz zespół mówi Ci, co zbuduje i kiedy strona będzie dostępna.

Co kupujący powinni móc zrobić z modelem?

Kupujący urządzenia techniczne chcą zajrzeć do środka i sprawdzić liczby, więc model powinien pozwalać rozłożyć produkt na części, przeciąć go, prześwietlić i odczytać dane każdej części, a nie tylko go obracać. Każda z tych funkcji działa w interaktywnym modelu, który możesz otworzyć już teraz:

• Widok rozstrzelony. Zawór kulowy HALVORN BV25 rozkłada się na 14 części w kolejności montażu.
• Przekrój i przepływ. Przetnij na pół pompę STRAVIK SX 50-160 i ustaw przepływ w dowolnym punkcie od 15 do 40 m³/h.
• Widok rentgenowski. Zobacz silnik, przekładnię falową 50:1 i łożysko wyjściowe przez obudowę przegubu robota ARTIXO RA90.
• Dane części i pomiary. Kliknij dowolną część kolektora Tutamen ICM-21, aby zobaczyć jej nazwę, materiał i liczbę sztuk, zmierz odległość między rzeczywistymi krawędziami i uruchom przepływ płynu chłodzącego z rozdziałem podanym w karcie katalogowej.
• Udostępnianie. Link i kod QR dla każdego widoku oraz krótka prezentacja krok po kroku dla odwiedzających, którzy nie będą sami eksplorować modelu.

Z tego samego modelu można wyrenderować filmy premierowe: zobacz animację 3D produktu albo 35-sekundowy film, w którym interaktywna strona produktu 3D jest rozkładana na części w przeglądarce.

Jak sprawić, by model 3D działał szybko na telefonach?

Ogranicz model do kilku megabajtów, wczytuj go, gdy odwiedzający do niego dotrze, i zadbaj o to, by strona była czytelna bez niego. Model wczytywany jako pierwszy wstrzymuje teksty i zdjęcia, po które przyszli kupujący.

• Skompresuj plik. glTF potrafi zapisywać liczby na mniejszej liczbie bajtów i kompresować geometrię rozszerzeniami Draco lub meshopt, a serwer powinien wysyłać plik skompresowany. Modele Proofscene zapisują kierunki powierzchni w liczbach 16-bitowych i są przesyłane z kompresją gzip: plik GLB ICM-21 o rozmiarze 3,6 MB dociera jako 2,0 MB.
• Inwestuj trójkąty tam, gdzie patrzą kupujący. Detale gwintów, drobne zaokrąglenia i wnętrza części, których nikt nie otwiera, zabierają telefonowi czas i nic nie wnoszą.
• Najpierw pokaż statyczny obraz. Wczytuj 3D, gdy model pojawi się w widoku podczas przewijania, lub po dotknięciu; model-viewer robi to za pomocą obrazu zastępczego (poster) i leniwego wczytywania.
• Nie blokuj przewijania. Osadzone modele Proofscene przewijają się razem ze stroną i powiększają tylko z klawiszem Ctrl lub gestem szczypania, a na telefonach ich panele są wysuwane, więc produkt pozostaje widoczny.
• Trzymaj fakty w tekście. Wyszukiwarki i asystenci AI czytają stronę, a nie model, więc opis, nazwy części i specyfikację umieść w HTML. Publiczne strony z demami Proofscene dodają dane strukturalne modelu 3D, a przeglądarka, która nie uruchamia 3D, i tak otrzymuje ten tekst.

Czy Twój plik CAD jest bezpieczny, gdy model trafi na publiczną stronę?

Tak, bo model do wyświetlania to nie Twój plik CAD: zawiera trójkąty z dokładnością potrzebną na ekranie, bez drzewa operacji, szkiców, parametrów i dokładnych powierzchni, i bez żadnych wewnętrznych szczegółów, które zostały pominięte. Przed publikacją zabezpiecz to, co ważne:

• Uprość lub usuń wszystko, co jest wrażliwe handlowo, na przykład wewnętrzny kanał lub profil uszczelki.
• Nigdy nie przesyłaj pliku STEP do przeglądarki, z której odwiedzający mogą pobrać oryginał.
• Przed premierą sprawdź model pod linkiem chronionym hasłem i podpisz NDA z każdym, kto pracuje na Twoim pliku CAD. Proofscene pracuje właśnie tak, a Ty zachowujesz prawa własności do swoich plików CAD i treści.

Czytaj także

Przeczytaj, jak ICM-21 firmy Tutamen trafił z pliku STEP na działającą stronę produktu, wypróbuj wszystkie cztery modele na stronie Interaktywne demo produktu 3D albo obejrzyj 36-sekundowy film o tym, jak przeglądarka produktów 3D trafia na Twoją stronę.