Photo-Sphere-Viewer 中获取场景鼠标坐标的方法解析

前言

在360度全景图浏览器的开发过程中，获取鼠标在全景场景中的精确位置是一个常见需求。Photo-Sphere-Viewer作为一款功能强大的全景图查看库，提供了便捷的方法来实现这一功能。

基本原理

要获取鼠标在全景场景中的位置，需要经过两个主要步骤：

1. 获取鼠标相对于查看器容器的坐标
2. 将这些坐标转换为全景场景中的球面坐标（偏航角yaw和俯仰角pitch）

实现方法

第一步：获取相对坐标

首先需要计算鼠标相对于查看器容器的位置。这是因为鼠标事件提供的坐标是相对于整个浏览器窗口的，而我们需要的是相对于查看器本身的坐标。

const boundingRect = viewer.container.getBoundingClientRect();
const viewerX = e.clientX - boundingRect.left;
const viewerY = e.clientY - boundingRect.top;

这段代码通过getBoundingClientRect()方法获取查看器容器的位置信息，然后从鼠标事件的clientX和clientY中减去容器的偏移量，得到鼠标在容器内的相对坐标。

第二步：转换为球面坐标

Photo-Sphere-Viewer提供了dataHelper.viewerCoordsToSphericalCoords方法，可以将二维的查看器坐标转换为三维球面坐标：

const { yaw, pitch } = viewer.dataHelper.viewerCoordsToSphericalCoords({
  x: viewerX,
  y: viewerY
});

转换后得到的yaw和pitch就是鼠标在全景场景中的球面坐标：

• yaw表示水平方向的角度（0到360度）
• pitch表示垂直方向的角度（-90到90度）

实际应用示例

下面是一个完整的示例，展示如何在鼠标移动时获取并显示球面坐标：

viewer.on('position-updated', (e) => {
  const boundingRect = viewer.container.getBoundingClientRect();
  
  const viewerX = e.clientX - boundingRect.left;
  const viewerY = e.clientY - boundingRect.top;
  
  const { yaw, pitch } = viewer.dataHelper.viewerCoordsToSphericalCoords({
    x: viewerX,
    y: viewerY
  });
  
  console.log(`当前视角: yaw=${yaw.toFixed(2)}°, pitch=${pitch.toFixed(2)}°`);
});

注意事项

1. 坐标转换应在鼠标事件处理程序中进行
2. 确保查看器已经完全初始化后再绑定事件
3. 对于性能敏感的应用，可以考虑对事件进行节流处理
4. 返回的角度值是以弧度还是度为单位，取决于Photo-Sphere-Viewer的配置

结语

通过上述方法，开发者可以轻松获取鼠标在全景场景中的精确位置，为实现各种交互功能（如热点标记、视角跳转等）提供了基础。理解这一原理也有助于更好地掌握Photo-Sphere-Viewer的坐标系统和工作机制。