バーチャル展示場(展示会)サイトを作成～Webサイトで3Dコンテンツ(Three.js)デザイン

Three.jsで360度写真パノラマ表示でバーチャル展示会（クリックやタップで説明表示）～Three.js[r145]を使用

特徴:

マウスドラッグやパンを使用して、360度のパノラマ写真の視点を自在に回転し、まるでその場にいるかのような臨場感を味わえます
さまざまな場所や風景、展示場を探索し、クリックやタップで詳細を見ることができます
シームレスなナビゲーションで、簡単にECシステムの商品サイトにリンクできます
スマートフォンやタブレットからもアクセス可能

ウェブ3Dパノラマ写真体験は、観光、不動産、ホテル、レストラン、イベントプロモーション、ＥＣサイトなど、さまざまな業界で活用できます。
ユーザーエクスペリエンスを向上させ、ウェブサイトの魅力を高めることができます。

マウス左ドラッグ（パン）で視点回転します。ホイール（ピンチイン、ピンチアウト）で拡大縮小できます。赤の四角い枠をクリックすれば説明が表示されます。

Three.jsを使用すると、簡単に360度写真パノラマ表示が可能でクリックやタップで説明を表示することができます。
このサンプルでは「OrbitControls.js」を使用せず、
mousedown,mousemove,mouseup,touchstart,touchmove,touchend,mousewheelイベントでパンや拡大縮小を行っています。
「OrbitControls.js」は拡大縮小は、画角の変更ではなく前進後退だからです。

360度写真を球体にテクスチャマッピングしています。
RICOH THETA SC2で撮影した360度写真
撮影にはRICOH THETA SC2を使用しました。

//描画キャンバスを取得
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){ //交差するオブジェクトがあったら
  //何らかの処理
}

three.jsは以下URLからダウンロードできます。
https://threejs.org/

three.jsのライセンスは以下URLを参照
https://github.com/mrdoob/three.js/blob/dev/LICENSE