Edited at

[Unity]WebGL出力でダイアログからVRMを読み込む

UnityのWebGLビルドで、ユーザーが好きなVRMを指定してゲームに読み込み、キャラクターとして使用する方法です。

読み込み部分は@mechamogeraさんの下記の記事ほぼそのまままです(感謝)


参考記事

「UnityのWebGL出力でHTMLのファイル選択ダイアログを表示して外部ファイルを読み込む」

https://qiita.com/mechamogera/items/89d4555b202af96810af


手順


UniVRMのインポート

https://github.com/dwango/UniVRM/releases

UnityPackageをダウンロードしてインポートします


Pluginの準備

上記の記事の、「uGUI上からファイルを読み込む方法」を使用します

https://qiita.com/mechamogera/items/89d4555b202af96810af#ugui%E4%B8%8A%E3%81%8B%E3%82%89%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E6%96%B9%E6%B3%95

記事内に記載されている「Assets/Plugins/FileImporter.jslib」を作成します。


スクリプトの準備


ImportButton.cs

using System.Collections;

using System.Collections.Generic;
using UnityEngine;
using System.Runtime.InteropServices;
using System;
using VRM;

public class ImportButton : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void FileImporterCaptureClick();

public void OnButtonPointerDown()
{
FileImporterCaptureClick();
}

public void FileSelected(string url)
{
StartCoroutine(LoadJson(url));
}

private IEnumerator LoadJson(string url)
{
print(url);
WWW www = new WWW(url);
while (!www.isDone)
{
yield return null;
}
if (www.error == null)
{
LoadVRMClicked_WebGL(www.bytes);
}
else
{
print(www.error);
}
}

void LoadVRMClicked_WebGL(Byte[] bytes)
{
var context = new VRMImporterContext();

// GLB形式でJSONを取得しParseします
context.ParseGlb(bytes);

context.Load();
OnLoaded(context);
}

private void OnLoaded(VRMImporterContext context)
{
//読込が完了するとcontext.RootにモデルのGameObjectが入っています
var root = context.Root;

//モデルをワールド上に配置します
root.transform.position = new Vector3(0, 0, 0);
root.transform.Rotate(new Vector3(0, 180, 0));

//メッシュを表示します
context.ShowMeshes();
}
}


上記スクリプトを作成し、シーンに「ImportButton」という名前の空のゲームオブジェクトを作成してアタッチします。

(PluginのSendMessageはこの名前をキーにしているので異なると動作しません)


ボタンの準備

uGUIのボタンを用意して、Event Triggerコンポーネントをアタッチし、Pointer Downイベントに対してImportButton.OnButtonPointerDown()を割り当てます。

WebGL用にビルドして動作確認します。

うまく動かない場合は、プラウザの開発者モードのConsoleを見るとエラー内容を確認できます。


サンプル

プロジェクト一式

https://github.com/torikasyu/UnityWebGLVRM

unityroomにアップしたもの

https://unityroom.com/games/torikasyu_vrmloader