環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️iPhone7(IOS 12.1)
⭐️Blender v2.79.6
⭐️Mac Book
⭐️ブラウザ safari
WebAR(AR.js)で使用する
Blenderで作成したモデルや、アニメーション 「.glb」として出力する方法として、アドオンを追加する
普通に、「.glb」形式で出力すると、モデルに色が付いていない状態で出力される。
なので「glTF Metallic Roughness」をリンクして出力するとモデルに色がついた状態となる。
実際に出力した動画はこちら↓↓
https://twitter.com/nonnonkapibara/status/1110183471064866832
🚩WebAR🚩
— non (@nonnonkapibara) 2019年3月25日
Blenderで出力した３Dモデルは🐱pngに比べて表示がちょっと重いみたい🐷#WebAR #ARマーカー #XRMTG #XRMTG pic.twitter.com/Bs76WIWu1X
1.「glTF-Blender-Exporter」で
「glTF-Blender-Exporter-master.zip」をダウンロードし解凍する。
https://github.com/KhronosGroup/glTF-Blender-Exporter
2.scripts - adding - 「io_scene_gltf2」ファイルを
Blenderのアドオン配下に設置する
（アプリケーションのBlender - Contents - Resources - 2.79 - scripts - addons配下に置く）
3.ユーザー設定を開く
4.「アドオン」タブを選択する。
5.glTFで検索する
6.Import Export glTF2.0を選択する
7.保存する
これで、エクスポート時に、glTFが選ぶことができる。
8.glTF Metallic Roughnessをリンクする
9.ファイルーリンク を選ぶ
10.「glTF-Blender-Exporter-master」ー「pbr_node」ー「glTF2.blend」ー「NodeTree」-「glTF Metallic Roughness」を選択する
11.マテリアルの「サーフェス」をTapする
１２.glTF Metallic Roughnessのシェダーを選択する
13.色がなくなるので、
BaseColorに、画像テクスチャ（png）を配置する
14.出力するモデルを全選択する
15.「ファイル」ー「エクスポート」でglTF2.0 （glb）を選択する
（アニメーションがある場合は、チェックONする）
アニメーションがある場合
これで、「glTF」が出力される
ここのサイトで、glTFのモデルが確認できる
https://gltf-viewer.donmccurdy.com/
こんな感じで、プレビュー確認できる
以下、上記の方法で、glbモデル出力しました。
🌸WebAR🌸やってみたよぉ🤩
— non (@nonnonkapibara) 2019年3月25日
（●＾o＾●）ｖ
WebブラウザでARマーカーを読み込んでみました🏖️
（マーカー式）
くるくるしてるハートは☀️Blender☀️のアニメーション を表示。
❤️ハート❤️をTapすると🎁Qiitaページへ🌈ジャンプ‼️作ってみたよぉ#WebAR #XRMTG #XRMTG pic.twitter.com/WxJlDZckKm
🎂WebAR🎂
— non (@nonnonkapibara) 2019年3月25日
Blenderで作ったアニメーション 「Walk」🍭を出力して表示してみた。#WebAR #ARマーカー #XRMTG #XRMTG pic.twitter.com/cibKbmLw10