three.jsのソースをWebXRに対応させる方法

three.jsのWebXR Exampleソース

前回まででA-FrameのWebXR対応方法について記載しました。
今回はThree.jsのWebXR対応方法について記載いたします。

題材とするのは、three.js ExamplesにあるWebXR対応ソースです。
比較的簡素なソースである「webxr_vr_sandbox.html」をベースにして、
WebXR対応に必要な設定箇所を解説いたします。
https://github.com/mrdoob/three.js/blob/dev/examples/webxr_vr_sandbox.html
（2021/03/29時点のソースを元にしています）

VRButtonライブラリの取得

ソースコード16行目
VRを許可するボタンの設置と、WebXR設定を行ってくれる「VRButton.js」を読み込みます。

import { VRButton } from './jsm/webxr/VRButton.js';

RendererのWebXR設定

ソースコード118行目
rendererのxrプロパティを有効化します。

renderer.xr.enabled = true;

VRButtonの設置

ソースコード121行目
上記で読み込んだVRButtonライブラリを設置します。

document.body.appendChild( VRButton.createButton( renderer ) );

アニメーションループ実装の変更

ソースコード140行目
アニメーションループの実装を行います。

通常Three.jsでは「window.requestAnimationFrame」を利用してループ処理を実装します。
WebXRではsetAnimationLoopでフレームごとの処理を設定します。

renderer.setAnimationLoop( render );

まとめ

思ったよりも簡単にWebXR対応できたかと思います。
今回はVR表示の実装を行いましたが、VRButton.jsをARButton.jsに変えることで、AR表示も可能です。
興味のある方は、ARButton.jsを利用したExamplesを確認してみてください。