Unityを利用してthree.js用のパノラマ画像を作成する

VRツアーをthree.jsで作成しようとサンプル素材を探したところ
１フロア各所のパノラマ画像が全然なく
Unityを利用してパノラマ画像を作成しました

インストール

Unity2020.3
Unity Recorderをpackageから
部屋のアセットを購入、インポート

シーン設定

ライティングやマテリアルの設定で何度も録画するため、
タグ機能を使い複数の場所を同時に出力できるようにする
タグをr1 - r7までつくり
カメラの複製、位置移動、タグ設定を繰り返す

Unity Recorder設定

Recording Mode -> Single Frame
Capture
Source -> 360 View
Camera -> TaggedCamera
Tag -> r1 *
Output File
File Name -> r1 *

Add Recorderで、追加して＊部分を割当

Recordしてファイル生成

three.jsに埋め込み

コードは、公式サンプルの　https://threejs.org/examples/webgl_panorama_equirectangular.html を参考

テクスチャのパスだけ変えて

webgl_panorama_equirectangular.html

const texture = new THREE.TextureLoader().load( 'textures/r1.jpg' );

ブラウザで確認

つづき