Three.jsで360度写真パノラマ表示でバーチャル展示会（クリックやタップで説明表示）～Three.js[r145]を使用
Three.jsを使用すると、簡単に360度写真パノラマ表示が可能で、更に工夫を行えばクリックやタップで説明を表示することができます。
このサンプルでは「OrbitControls.js」を使用せず、
mousedown,mousemove,mouseup,touchstart,touchmove,touchend,mousewheelイベントでパンや拡大縮小を行っています。
マウス左ドラッグ（パン）で視点回転します。ホイール（ピンチイン、ピンチアウト）で拡大縮小できます。赤の四角い枠をクリックすれば説明が表示されます。
Androidで撮影した360度写真を球体にテクスチャマッピングしています。
//描画キャンバスを取得
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){ //交差するオブジェクトがあったら
//何らかの処理
}