three.jsのVR表示機能

three.jsには標準で、VRまたはARとして表示する機能があります。
ですので、それを有効にします。MMDファイルのロード部分はほとんど変わっていません。

詳細は、以下に記載があります。

How to create VR content
　https://threejs.org/docs/#manual/en/introduction/How-to-create-VR-content

※MMDビューアとして、通常のJavascript版とmodule版の2つを用意していましたが、今回はmodule版を前提としているようです。

動作環境としては、AndroidとiOSのようです。
なぜならば、OSの機能である「ARCore」や「ARKit」を使い、さらにChromeからWebARとして呼び出せる環境である必要があるためです。
私の場合はAndroidで確認しました。

基本的な変更点は以下の通りです。

①背景色を透過にするため、以下の部分をコメントアウトします。

// this.scene.background = new THREE.Color( 0xffffff );

また、同様に、WebGLRenderer にalpha=trueの引数を加えます。

this.renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, alpha: true, preserveDrawingBuffer: true } );

②以下の部分で、ブラウザのWebAR機能を有効にします。
this.renderer.xr.enabled = true;

③以下を入れることで、VRまたはARモードに入るためのボタンを表示してくれます。

if( mode == 'vr')
  document.body.appendChild(VRButton.createButton(this.renderer));
else
  document.body.appendChild(ARButton.createButton(this.renderer));

④最後に、レンダラーのループ処理で、以下の通りに変える必要があります。

// requestAnimationFrame( this.animate.bind(this) );
this.renderer.setAnimationLoop(this.animate.bind(this));

これで終わりです！

動作の様子

HttpsのWebサーバに、デプロイし、Chromeブラウザからmodule版の方のページを開きます。Androidで開いてください。
　mmd_viewer/mmd_viewer_jsm/index.html

open(vr)やopen(ar)というボタンがあるかと思います。前者がVRモードで全画面表示し、後者はARモードで全画面表示します。

とりあえず、いつもの全画面表示されますが、下の方に薄く「ENTER VR」または「ENTER AR」というボタンがあります。これをクリックすると、VRモードまたはARモードになります。

こっちがVR。

こっちがAR

途中、Google Play 開発者サービス(AR)のインストールを促されるかもしれません。

(おまけ)ステージの表示

MMDでは、モデル・モーションまたはポーズに加えて、ステージという概念があるそうです。
簡単いうと背景です。3次元になると、背景の画像ではなく、立体画像になるので、ちょっと呼び方を変えているようです。

ステージも、モデル同様に、PMXまたはPMDファイルですので、モデル・モーションまたはポーズのロードに加えて、ステージのPMXまたはPMDファイルもロードするようにしました。

終わりに

以下の記事を参考にさせていただきました。ありがとうございました。

たった4行でできる！ブラウザ向けVRをThree.jsで実装する方法
　https://ics.media/entry/18793/

続編です。
　「原神」のMMDキャラクタをスマホVRの世界に呼び込む
結局のところ、renderer.setAnimationLoop は使わず、上記の投稿のやり方の方がよいです。

以上

「原神」のMMDをスマホのブラウザでVR・ARする

three.jsのVR表示機能

動作の様子

(おまけ)ステージの表示

終わりに