model-viewer 検証
model-viewerとは
https://gyazo.com/38e7bf71f421619f0f14be24e7edda0f
サンプルを試す↓
https://gyazo.com/6f3fc08f5f827e3b1eaa1700836bbf75
googleが開発しているWeb Component
3Dモデルの表示が可能
AR表示が可能
iOS, Android ともに利用可能
複数の3Dモデルの同時表示が不可
CDNもしくはnpm module
全てのエバーグリーンブラウザの最新から2つ目までのメジャーバージョンをサポートしている
エバーグリーンブラウザ:新しいバージョンに自動的にアップグレードされるブラウザのこと、、らしい
注意点
OSによってAR表示のために利用してる機能が異なる。それにより必要となる3Dデータの形式も異なる。
これ以外の形式は対応してない。
table: 表
OS iOS (12以降) Android
必要な機能 AR Quick Look Scene Viewer
ファイル形式 .usdz .glbまたは.gltf
ということで、2種類のデータを用意する必要がある。
3Dモデルのファイル形式について
少し調査した。
table:表
形式 特徴 アニメーション情報の保存可否
.glb, .gltf WebGLやOpenGL向け。JSON形式。 ○
.usdz ピクサーが開発。Apple(AR Quick Look)向けな感じ? ○
.fbx Autodesk社。仕様がドキュメント化されてない。 ○
.wrl web上での利用を想定。後継として.x3dがある。 ○
.obj 他の形式に比べてデータ量が軽いが保持できる情報も少ない。 ×
サンプル
自作のコードが動かないので、とりあえず見つけたやつ。。。
TODO: 属性の説明
code: attributes
<model-viewer
src="xx.glb" // .glbか.gltfの3Dモデル
ios-src="xx.usdz" // .usdzの3Dモデル
alt="xx" // 説明
poster="xx.png" // 画像
reveal=""
loading=""
loaded=""
modelsVisible=""
ar // AR表示(常にAR表示になるわけではない)
ar-scale=""
ar-placement="" // 床か壁に配置
camera-controls // マウスorタッチ操作でモデルを移動可能か
disable-zoom // ズーム不可
auto-rotate // 自動でモデルを回転
field-of-view="" // 視野角
autoplay // アニメーション自動再生
scale=""
</model-viewer>
検証結果
WebComponentであるため、同一画面上に他のhtml要素も配置可能
AR表示時は変更不可のUI
モーダルのようになっているため、元画面からの切り替えは容易
AR表示時のカメラ撮影可能
AR表示時、カメラを上下に動かすと接地してないように見える(環境によるかもしれない)
3Dモデルからカメラを外しても表示位置は変わらない
カメラが移動しても3Dモデルは元の表示位置からずれない