Logitech MX Master 4

ロジクールのマウス MX Master 4 の製品ページ。通常の写真ギャラリーの隣に「3D」タブがあり、そこからモデルを回して見られます。 ヒーローでの見せ場ではなく、既存の製品詳細ページを作り直さずに3Dを足す、低リスクなUXパターンとして参考になります。ページのペイロードにはカラーごとの設定がそのまま入っています： "3d":{glb:"/content/dam/logitech/en/ar-models/mice/mx-master-4/mxmaster4-graphite-ar-360.glb", camera_orbit:"", image:"", usdz:"/content/dam/logitech/en/ar-models/mice/mx-master-4/mxmaster4-graphite-iphone-360.usdz", hdr:""} 【参考になるポイント】 ・Web/Android向けのGLBとiOS向けのUSDZを必ず対で持つ。ファイル名に -ar-360 / -iphone-360 とターゲットを埋め込む命名規則 ・camera_orbit と hdr が空のままなのは、ビューア側のデフォルトに任せているということ。CMSのスキーマが <model-viewer> の属性そのままの形をしている ・GLBが約10MB、USDZが約8MB。3カラー分で約54MBの3Dアセットを、変換のかからないDAMのパス（/content/dam/...）から素で配信している。大企業における3Dアセット管理の課題がそのまま見える ・3Dへの入口が写真の隣のタブでしかなく、特別な導線を作っていない。既存PDPに3Dを足すときの最も安全なやり方 ・※配信HTMLにもチャンク名にも model-viewer の文字列は出てこない。設定オブジェクトのフィールド構成からの推測で、ビューアの実装は未確認