model-viewer

Blender

事前準備：3Dモデルの確認

【https://gltf-viewer.donmccurdy.com/】でモデルを確認します

何も表示されない場合、WordPressでも上手くいかないのでやり直しです

WordPressにアップロード

デフォルトではgltfファイルをアップロードできないので、Functions.phpに追記します

function allow_gltf_uploads($mime_types) {
    $mime_types['gltf'] = 'model/gltf+json';
    $mime_types['glb'] = 'model/gltf-binary';
    return $mime_types;
}
add_filter('upload_mimes', 'allow_gltf_uploads');

CDNを読み込む

model-viewerは3Dモデルを表示させるためのライブラリです

使うためにはスクリプトタグを記載する必要があります

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

（※下の行はIE11などの古いブラウザに対応するためのスクリプトです）

model-viewerタグを書く

あとは好きなところにmodel-viewerタグを書くだけです

<model-viewer id="reveal" loading="eager" camera-controls="" auto-rotate="" poster="ロード画面のURL(https://~~.pngとか)" src="3DモデルのURL(https://~~.gltfとか)" exposure="0.6" alt="pancake" style="width: 100%; height: 400px;"></model-viewer>

・camera-controls=”” … この文字列があればカメラ操作できるようになります

・poster … モデルがローディングされている間に表示されるposter画像

・auto-rotate … モデルを自動で回転させます

参考・備考

【https://ashikapengin.com/2021/01/27/gltf-1/】

model-viewerでも3Dモデルを表示できますが、Three.jsを使った方法もあるそうです↓

【https://mawasu-blog.com/threejs_view_3dmodel/】

Google Model Viewerは内部でThree.jsを使っているので、どちらを使っても良さそう

BACK