CPSLab VR Tourを作った

www.adventar.org

4日目です。 3日目は 岩井研残留日誌 - あつおの日常~あつおと過ごした365日~ でした。

自分の研究は複数の360度画像・動画を扱うのですが、その過程で所属している研究室のVR Tourなるものを作りました。

CPSLabVRTour

※ 画像が結構重いため初回ロード時は時間がかかります。

今回これの作成には three.js - Javascript 3D library を使用しました。

白いアイコンをクリックするとそこの情報が、矢印っぽいアイコンをクリックするとその方向の別の視点の画像に遷移します。
CPSLab入りたいなーとか、今年入ってきたB3生でどこに何があるのかまだわかってなかったときに参考にしてもらえると嬉しいです。

やっていること

やっていることは簡単でthree.jsにあるSphereGeometryを使ってMeshを作成しその上に各オブジェクトを配置しています。
オブジェクトの配置は、3D空間上にある球体の面に配置するためx, y, z座標が必要になります。
しかし現状、オブジェクトを配置するためのUIは作っていません。
そのため、手動で配置する場所の座標を打ち込んでいくしかないのですが、球面上に配置するオブジェクトのx, y, z座標なんて人間がすることじゃありません。 というかかなり厳しいと思います。まぁ他にももろもろ事情はあるんですが。

では、何でやってるかって言うと、仰角と方位角を用いて位置を指定し、配置する際にx, y, z座標に変換しています。
それならばどの方向でどれくらいの高さなのかを指定してあげるだけなので人間でもできますね。(仰角と方位角がわからない場合はググってください)

ちなみに仰角を phi , 方位角を theta , 球の半径を r にした場合、以下の式でx, y, z座標に変換できます。

  theta = theta * Math.PI / 180;
  phi = phi * Math.PI / 180;

  x = -r * Math.cos(phi) * Math.cos(theta);
  y = r * Math.sin(phi);
  z = r * Math.cos(phi) * Math.sin(theta);

まぁ3Dの分野では割と一般的に手法ではあると思います。三角関数は結構使われてると思うし。

最後に

もともと公開していたものですし、複数人の人には話して問題ないだろって感じだったんですが、プライベート空間でもあるので公開されるのが嫌な人がいましたらすぐに公開を停止します。その時は私まで連絡ください。