three.jsl - как создать интерактивное изображение 360 с управлением мышью?

Question

Как мы можем использовать three.js для создания эффекта, подобного тому, что видно here?

Другие решения, которые мы видели, похоже, требуют перетащить & падение для управления углом камеры - мы ищем, чтобы положение мыши контролировалось там, где находится камера. Например, мышь, находящаяся в верхнем левом углу, всегда указывает камеру на одно и то же место. Есть ли реализация с открытым исходным кодом?

Answer 1

Это не сложно.

Вы можете слушать позицию мыши на экране и пересчитать 0-1 XY осям:

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; 
} 

и уверен, вам нужно только поместить камеру внутри сферы с текстурой ...