🥽

【React Native × AR】3DモデルをViroで表示させるためのMayaエクスポート方法

2025/02/03に公開

はじめに

ReactVision Viroを使用してARの技術検証を行っています。その時のメモを残します。

https://github.com/ReactVision
https://viro-community.readme.io/

expoSDKは古いものを使用しているため注意が必要です。

"@reactvision/react-viro": "^2.41.6",
"expo": "~50.0.4",

Blenderで作成した3Dモデルが表示されない

Viroで3Dモデルを表示する場合に、Blenderで作成した3Dモデルだと表示できなかったり、テクスチャが反映されず白黒で表示されたりします。
Viroのトラブルシューティングを見るとBlenderは非推奨、Mayaを推奨の記載がありました。

Blender
We recommend using another 3D modeling package such as Maya or 3D Studio Max to export your model as it does not export textures along with the mesh.

Blender ではメッシュと一緒にテクスチャがエクスポートされないため、モデルをエクスポートするには Maya や 3D Studio Max などの別の 3D モデリング パッケージを使用することをお勧めします。

https://viro-community.readme.io/docs/3d-model-troubleshooting-guide#how-do-i-properly-export-my-3d-model-to-fbx-using

Mayaでエクスポートし直す方法

マテリアルを設定する

ウィンドウ>レンダリングエディタ>ハイパーシェード

作成>マテリアル>Lambertシェーダ

ファイル>イメージの名前>テクスチャPNG選択

2本指長押し
マテリアルを選択項目に割り当て

アニメーションを設定する

ウィンドウ>アニメーション>タイムエディタ

アニメーション情報の含まれているfbxをインポートする

タイムエディタを含めてfbxで書き出す

ファイル>ゲームエクスポータ

アニメーションに✅が入っていることの確認

書き出し

まとめ

この方法によってBlenderで作成した3DモデルをViroに表示させることができました。

Discussion