Kuidas lisada veebilehele interaktiivne 3D-mudel

Kõige kiirem viis interaktiivse 3D-mudeli lisamiseks veebilehele on eksportida GLB-fail ja kasutada seda Google’i tasuta veebikomponendis model-viewer. Umbes kümne HTML-reaga saad mudeli pööramise, suurendamise ja AR-i telefonis. Shopify poes võid GLB otse toote juurde üles laadida. Keerukamate vajaduste jaoks, näiteks kerimisega juhitav kaamera, materjalide vahetamine või brändile omane kasutajaliides, tuleb vaatur luua Three.js-is.

Siin on neli võimalust, kõige lihtsamast täieliku eriarenduseni.

4 viisi 3D-mudeli veebilehele lisamiseks

1. model-viewer

Google’i avatud lähtekoodiga veebikomponent. Laadid ühe skripti ja kasutad seejärel märgendit <model-viewer> samamoodi nagu <img>. Komponent haldab kaamera juhtimist, valgustust, asenduspilti ja AR-i avamist. See on meie tavapärane soovitus, kui veebilehe 3D-vaatur ei vaja erifunktsioone.

2. Sketchfabi manustamine

Laadi mudel Sketchfabi, klõpsa Embed ja kleebi iframe lehele. Arvesta, et kasutad Sketchfabi mängijat, laadimiskuva ja platvormi.

3. Shopify sisseehitatud 3D

Shopify võtab GLB-faile vastu toote meediafailidena ja kuvab neid teema vaaturis. Partnerinõuetes soovitatakse umbes 4 MB kogumahuga faili ja kuni 2048 × 2048 px tekstuure. Mudeli mõõtkava peab vastama tegelikule suurusele. Teemade seadistamist käsitleme Shopify 3D-vaaturi juhendis.

4. Three.js-i eriarendus

See sobib siis, kui mudel on osa toote esitlusest: reageerib kerimisele, vahetab klõpsu peale materjali või asub spetsiaalselt kujundatud stseenis. Selline lahendus vajab arendust, mitte pelgalt manustamist. Millal see tasub ära, selgitame toodete 3D-visualiseerimise juhendis.

Failivormingud: glTF, GLB ja USDZ

• glTF / GLB. glTF on avatud standard veebi 3D jaoks, mida haldab Khronos. GLB on selle binaarversioon, kus võrk, materjalid ja tekstuurid on ühes failis. Kasuta GLB-d.
• USDZ. Apple’i vorming AR Quick Looki jaoks iPhone’is ja iPadis. model-vieweris saad faili lisada atribuudi ios-src kaudu või jätta selle määramata: komponent loob USDZ automaatselt, kui külastaja vajutab iOS-is AR-nuppu.
• FBX, OBJ, STEP, SolidWorks. Need pole veebivormingud. Teisenda fail esmalt GLB-ks. CAD-ist eksporditud mudeli võrk tuleb tavaliselt enne kasutamist kergemaks ümber ehitada.

3D-mudeli näitamine veebilehel model-vieweriga: samm-sammult

1. Ekspordi GLB Blenderist või muust 3D-tööriistast tegelikus mõõtkavas, kasutades meetreid.
2. Tihenda fail. Kasuta glTF-Transformi või sarnast tööriista, et vähendada geomeetria ja tekstuuride mahtu.
3. Renderda mudeli algvaatest asenduspilt. See ilmub kohe ja on nähtav mudeli laadimise ajal.
4. Lisa kood:

<script type="module"
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>

<model-viewer
  src="/models/lounge-chair.glb"
  poster="/models/lounge-chair-poster.webp"
  alt="Oak lounge chair with bone wool cushion, rotatable 3D view"
  camera-controls
  touch-action="pan-y"
  auto-rotate
  ar
  ar-modes="webxr scene-viewer quick-look"
  loading="lazy"
  style="width:100%; aspect-ratio:1/1;">
</model-viewer>

5. Testi kahel päris telefonil: ühel iPhone’il ja ühel keskklassi Androidil. Kontrolli, et lehte saaks kerida ka mudeli kohal (touch-action="pan-y" võimaldab seda) ja et AR-nupp oleks nähtav.

Enne avaldamist kontrolli modelviewer.dev-ist ajakohast versiooninumbrit ja määra see koodis kindlaks, selle asemel et laadida „latest“. Arendajale pakub põhjalikumat tehnilist selgitust Cloud Fouri juhend 3D-mudelite veebi lisamiseks.

Mahupiirid kiireks laadimiseks

Kõige levinum viga on kasutada otse CAD-ist tulnud 40 MB mudelit. Shopify ligikaudu 4 MB siht on mõistlik ülempiir. Avavaate mudelile seame ise rangema piiri.

Avavaate mudeli tihendatud GLB peaks meie sihi järgi olema kuni 2 MB ja tekstuurid 1K-2K eraldusvõimega KTX2-vormingus. Mudel laaditakse alles pärast ülejäänud lehe kuvamist. Kõik piirväärtused ja tihendamise sammud leiad 3D-veebilehe jõudluse juhendist.

AR: mis kus töötab

model-viewer toetab kolme AR-režiimi: webxr, scene-viewer (Android) ja quick-look (iOS). WebXR vajab brauseri API-sid, mis model-vieweri dokumentatsiooni järgi on saadaval Chrome’is, Edge’is ja Samsung Internetis, kuid mitte Safaris ega Firefoxis. Seepärast tasub määrata kõik kolm režiimi: iga telefon kasutab seda, mida toetab.

Levinud vead

• Vale mõõtkava. AR-is 3 cm kõrgusena ilmuv tool õõnestab usaldust.
• Asenduspilt puudub. Mudeli laadimise ajal näeb külastaja tühja ala.
• Kerimine takerdub. Täislaiuses vaatur võib telefonis pühkimisliigutuse enda jaoks kinni püüda.
• Alternatiivtekst puudub. Mudel vajab kirjeldust nagu iga teinegi pilt.
• Lehel on liiga palju vaatureid. Iga vaatur laaditakse eraldi ja loob oma GPU-konteksti.