Rozšířená realita · ukázka

Skříňka ve tvém pokoji

Model je ve skutečné velikosti. Otoč ho prstem, přepni povrch a na telefonu ho postav na podlahu přes tlačítko AR.

táhni pro otočení

Načítám model…

Rozměry

Šířka: 800 mm
Hloubka: 400 mm
Výška: 900 mm
Sokl: 100 mm
Lamino: 18 mm
Záda: 8 mm

Hloubka je bez madel. S madly je to 433 mm.

Povrch

Jak to zprovoznit s vlastním modelem

Exportuj model do GLB Z Blenderu: File → Export → glTF 2.0, formát glTF Binary (.glb). Ze SketchUpu nejdřív zkus nabídku Export, podle verze tam GLB nebo USDZ už může být. Když ne, exportuj .dae nebo .obj, otevři to v Blenderu a ulož jako GLB.
Zkontroluj měřítko V AR se model zobrazí tak velký, jak je v souboru, protože 1 jednotka je 1 metr. Počátek (0, 0, 0) dej doprostřed na podlahu, ať se model postaví na zem. Skříňka 800 mm musí mít v Blenderu 0,8 m.
Dej soubory do jedné složky index.html a tvůj .glb vedle sebe. V souboru index.html přepiš v elementu model-viewer hodnotu src="cabinet.glb" na jméno svého souboru.
Nahraj na Cloudflare Pages AR vyžaduje https, což Pages mají. Stejný postup jako u tvých ostatních aplikací, stačí nahrát složku.
Otevři odkaz na iPhonu v Safari Klepni na Zobrazit v AR, namiř telefon na podlahu a model se postaví před tebe. Na iPhonu to běží přes AR Quick Look, na Androidu přes Scene Viewer.

Kde co funguje

Zařízení	Prohlížeč	Co uvidíš
iPhone, iPad	Safari	3D náhled a AR přes Quick Look
Android	Chrome	3D náhled a AR přes Scene Viewer
MacBook	Safari, Chrome	Jen 3D náhled, AR potřebuje kameru telefonu

Když stránku otevřeš tady v okně Claude, 3D náhled poběží, ale tlačítko AR nemusí nic spustit, protože okno omezuje přístup ke kameře. Plný AR zkus až na vlastní adrese.

Minimální kód stránky

<script type="module"
  src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.5.0/dist/model-viewer.min.js"></script>

<model-viewer src="cabinet.glb" alt="Skříňka"
  ar ar-modes="webxr scene-viewer quick-look" ar-scale="fixed"
  camera-controls style="width:100%;height:60vh">
</model-viewer>