【three.js】オリジナルパノラマビュアー開発

弊社では、パノラマコンテンツの制作も行っております。
その一環として、現在three.jsをベースにしたオリジナルのパノラマビュアーを開発中です。

パノラマコンテンツを作成できる環境としては、下記のようなさまざまなものがすでにあります。

これらを使って出来る範囲であれば、一から仕組みを作るよりもそちらを利用した方が早いと思います。

ただ、弊社で使いたい形にするためにはいずれも様々なカスタマイズが必要なことが多く、その手間も結構かかってしまっていましたので、それならいっそのこと“自分たちが納得できる形のオリジナルのパノラマビュアーを作ってみよう！”ということになり、今回の開発が始まりました。

現在、弊社のオリジナルパノラマビュアーでは、下記の機能をサポートしています。

• シーン
• ホットスポット
• HTMLパネル
• ビデオパネル
• 2Dテキスト
• 3Dオブジェクト
• オートローテーション
• VRモード

いずれの機能も、パソコンおよびモバイルで動作しています。

パソコンで動くものはたくさんあるのですが、モバイルやVRでちゃんと動くものはまだまだ少ないのが現状です。
今回作成しているオリジナルのパノラマビュアーで重視しているのは、パソコンと同様にモバイルやVRでも同じもの同じように見れるという点です。

機能としてはまだ基本的な部分しかありませんが、まずは最初のバージョンですので、これらの基本機能がいずれの環境でもきちんと動くということを一番重視して開発を行っております。

パノラマビュアーの開発環境としては、three.jsを採用しています。
理由は、“コンテンツの起動が早い”という点からです。

Unityでの開発も検討したのですが、コンテンツ起動後の速度はWebAssemblyのおかげでUnityでも遜色ないくらいの体感速度が得られるのですが、コンテンツの起動の際のUnityエンジンの起動にかかる時間がまだまだ長いと感じてしまう部分がありますので、パノラマのようにWeb上でパッと見れるようなコンテンツには不向きなため、今回はthree.jsで開発を進めることにしました。

今後は、パノラマコンテンツ作成に必要な機能をさらに盛り込んでいくと同時に、
現在はHTML/JavaScriptが使えないとコンテンツ制作できないところを、誰でも簡単に作れるようにできれば…と考えております。