Я создаю виртуальный тур, загружая 360 изображений, и хочу включить точку доступа или любой элемент div внутри этого 360-го изображения в нажатой позиции на 360-м изображении. Что я должен сохранить в базе данных от значения события, как я могу получить значение угла и значение event.clientX или значение event.clientY из события щелчка. Если я создаю div, то при повороте изображения на 360 div остается в том же положении, но я хочу, чтобы этот div скрывался при вращении камеры.
Я уже пробовал использовать спрайт. Он работает нормально, но не может использовать никакой CSS внутри этого материала спрайта. Поэтому я хочу, чтобы элемент div находился вне холста, где я могу установить верхнее, левое значение позиции и отобразить точку доступа или любой элемент div.
onMouseMove( event ) {
const intersects = raycaster.intersectObjects(spheremesh, true);
if (intersects[0]) {
var infoHotspotsPoint = intersects[0].point;
$('#hotspotdiv').css({
top: `${event.offsetY}px`,
left: `${event.offsetX}px`
});
}
}
Это будет отображаться только в одной позиции на 360 изображения при повороте. Но я хочу, чтобы этот div также был перемещен и скрыт, если эта конкретная нажатая часть не видна.
Я хочу что-то вроде этого:
https://dubai360.com/scene/5526-49-al-seef-walkabout-49/en