360度イメージ写真をThree.jsでパノラマ表示！クリックやタップで情報を確認できるバーチャル展示会
Three.jsを使って360度パノラマ画像を表示し、クリックやタップで情報を表示するインタラクティブな実装例です。
マウス操作で視点を回転させたり、ホイールで拡大縮小することができます。
赤枠をクリックすると説明が表示される仕組みで、構造の中に意味を埋め込む設計になっています。
ECサイトの商品説明、展示会の案内、技術資料の補足など、実用的な応用が可能です。
- マウスドラッグやパンにより360度のパノラマ写真の視点を自在に回転しその場にいるような臨場感を味わえます
- さまざまな場所や風景、展示場を探索しクリックやタップで詳細を見ることができます
- シームレスなナビゲーションでECシステムの商品サイトにリンクすることもできます
- スマートフォンやタブレットからもアクセス可能
マウス左ドラッグ（パン）で視点回転します。ホイール（ピンチイン、ピンチアウト）で拡大縮小できます。赤の四角い枠をクリックすれば説明が表示されます。
//描画キャンバスを取得
let can=document.getElementById("can");
//キャンバスの幅と高さを取得
let w=parseInt(window.getComputedStyle(can).width);
let h=parseInt(window.getComputedStyle(can).height);
let mouse=[];
//マウスのクリック座標をキャンバスに対してX(-1～+1),Y(上下逆転-1～+1)に変換する
point.x= event.offsetX/w*2-1;
point.y=-event.offsetY/h*2+1;
//レイキャストを作成
let ray=new THREE.Raycaster();
//マウス位置からまっすぐに伸びるレイ（光線）ベクトルを生成
ray.setFromCamera(point,camera);
//レイと交差するオブジェクトの座標を求める
let s=ray.intersectObjects(scene.children);
if(s.length>0){ //交差するオブジェクトがあったら
//何らかの処理
}
360度写真を球体にテクスチャマッピングしています。
撮影にはRICOH THETA SC2を使用しました。
three.jsは以下URLからダウンロードできます。
https://threejs.org/
three.jsのライセンスは以下URLを参照
https://github.com/mrdoob/three.js/blob/dev/LICENSE