Blog

Three.jsによるWebGLで360度パノラマ表示

2016.06.21Cat:html5 WebGL デザイナー
nino-eye

以下の様な360°パノラマ画像(本来の意味とは違ってくるそうですがHDRIと呼ばれることも)を元にパノラマ表示をする方法はいくつかありますが、
Three.jsを使うと、WebGLの技術を使って、
簡単に3D映像の背景として360度のパノラマを表示することができます。

10-Shiodome_Stairs_preview
素材元: sIBL Archive

↓こちらが実際に作ってみたもの

DEMO1

DEMO2

DEMO3

方法は、Three.js公式DEMOを参考にしました。

仕組み・方法

仕組みは360°パノラマ画像の画像をテクスチャとして設定した大きな球体の内側を、
球体の中心から見るようにカメラを設置するというものです。

HTML

HTMLではWebGLを表示するCanvasを設置する要素を設置しておき、
予めThree.jsの公式サイトからダウンロードして設置しておいたThree.jsのファイルを読み込んでおきます。

JavaScript

以下の様なscriptを記述して、設置したい背景となる360°パノラマ画像の場所を変更して完了です。
コードは公式のDEMOを元に、スマホでの操作にも対応させました。

3Dのオブジェクトを中に設置することもでき、
背景の映り込みも設定できます。

割りと簡単に設置できますので、
利用しやすいのではないかと思います。

参考サイト

three.js – Javascript 3D library
three.js/webgl_materials_cubemap_dynamic2.html at master · mrdoob/three.js · GitHub

HDRI素材元

sIBL Archive

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ