three.jsl - インタラクティブなマウス制御360画像の作成方法

Question

three.jsを使用して、表示可能なものと同様の効果を得るにはどうすればいいですか？here？

私たちが見た他の解決策は、カメラの角度を制御するためにドラッグを&ドロップする必要があるようです - カメラが指し示しているマウスコントロールの位置を探しています。たとえば、左上隅にあるマウスは常にカメラを同じ場所に向けます。これはオープンソースの実装ですか？

Answer 1

複雑ではありません。

あなたはXY軸、画面上のマウスの位置を聞いて、0-1に再計算することができます。この後

var mouse = new THREE.Vector2(); 

function onDocumentMouseMove(event) { 
     event.preventDefault(); 
     mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
     mouse.y = - (event.clientY/window.innerHeight) * 2 + 1;  
} 

をあなたが計算し、カメラの回転RAD設定することができます：あなたは、

function onDocumentMouseMove(event) { 
     event.preventDefault(); 
     mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
     mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 

     //default_x = your default camera x rotation 
     //default_y = your default camera y rotation 
     //s = sensitivity coeficient default 1 for 360° rotation, 0.1 for smaller angle 
     camera.rotation.x = (default_x*mouse.x)*s; 
     camera.rotation.y = (default_y*mouse.y)*s; 
} 

と確認をテクスチャで球の内側にカメラを置くだけでいいです...