HoloLensチームの佐藤です。今回はアドベントカレンダーの記事ということで、日頃やらないようなお試し的なことをやってみようかとおもいました。Mapping)を取得する機能が端末に備わっております。この空間情報のデータは、HoloLensのDevicePortalからダウンロードすることができます。詳しく乗っているのでそちらを参照いただければと思います。調べていくとThree.jsが.obj形式の表示にも対応していることが判明し、今回はThree.jsを使ってブラウザに表示するところまでをやってみようと思います。Three.jsexmaplesページに様々なサンプルがあるのですが、どれもブラウザで実現しているとは思えないものばかりです。(後々調べてみると、HoloLensのDevicePortalで表示している空間データもThree.jsで表示しているみたいです)なお、ブラウザで3Dを表示する技術はWebGLという標準仕様があり、上記のThree.jsはWebGLを簡単に利用できるようにラップしたライブラリとなっています。(全てのブラウザで利用できるわけではなく、互換性のあるものに限られます)さっそく作業を進めていきます。Viewの【Save】ボタンを押してローカルに保存します。保存した.obj形式のファイルは。ビューアーアプリで閲覧することができます。Three.jsの環境を構築する環境の構築はいろいろと方法あると思いますが、私は下記のやり方で環境構築いたしました。EdgeThree.jsはここからダウンロードします。npmでインストトールすることができますが、今回はダウンロードしたもの(r99)を使ってみます。表示してみる(実装)では、下記のようなhtmlを用意します。</body></html>そして同一パスに下記のjsファイルを用意します。}}ブラウザで実行する前に注意点として、.objファイルをブラウザで表示するためにはプロトコルをhttpsやhttpにする必要があります。ローカルで実行する場合、PCのIISを有効かし、MIMEタイプに.objファイルを追加する必要があります。ここまでは簡単に表示することができました。HoloLensのアプリで取得した空間情報をサーバーにアップロードして利用するようなシナリオがあったら表示用に利用できそうです。