HTML怎么给全景图做局部映射区域-html教程-PHP中文网

用+无法用于全景图热点，因等距柱状投影下像素坐标与经纬度呈非线性关系；应采用Three.js的Raycaster球面映射或原生JS手动换算经纬度，并注意移动端touch事件坐标校准及缩放兼容性问题。

html怎么给全景图做局部映射区域

用 `<map></map>` + `<area>` 给全景图加热点区域行不通

直接套用传统图像映射（<img usemap="#map">）在全景图上会失效——因为全景图（尤其是球面/等距柱状投影）的像素坐标和视觉角度是非线性映射的。<area shape="rect" coords="x1,y1,x2,y2"> 这套基于平面直角坐标的定位逻辑，对经纬度展开的全景图完全不适用。你拖动视角后，热点位置立刻偏移甚至消失。

Three.js 中用 `Raycaster` 实现球面坐标到屏幕坐标的实时映射

真正可行的方式是把全景图作为 Three.js 球体内表面纹理，所有交互基于三维空间计算：

用户点击或悬停时，用 raycaster.setFromCamera( mouse, camera ) 发射一条射线
raycaster.intersectObjects( [sphere] ) 获取交点世界坐标 point
将 point 转为球面坐标：theta = Math.atan2(point.x, point.z)（经度），phi = Math.acos(point.y / radius)（纬度）
再把 (theta, phi) 映射回你预设的热点区域范围（比如某展厅的「入口」区域定义为 theta ∈ [-0.3, 0.1], phi ∈ [0.2, 0.45]）

注意：球面半径必须与全景图纹理贴图方式一致（如使用 THREE.SphereGeometry(500, 64, 64)，则 radius = 500）；否则 phi 计算结果会失真。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

不用 Three.js？用 CSS + JS 手动做等距柱状图（Equirectangular）坐标换算

如果项目受限只能用原生 HTML/CSS/JS（无 WebGL），且全景图是标准等距柱状投影（宽高比通常 2:1），可手动换算：

监听 mousemove，用 event.offsetX / event.offsetY 得到鼠标在 <img> 上的归一化坐标：u = x / width, v = y / height
转球面经纬度：lon = (u - 0.5) * 2 * Math.PI, lat = (0.5 - v) * Math.PI
每个热点区域存的是经纬度范围（如「咖啡区」：lon ∈ [-0.8, -0.5], lat ∈ [0.1, 0.3]），每次移动都做包含判断
必须配合 transform: scale() 或 object-fit: cover 的容器控制缩放，否则 offsetX/Y 会被 CSS 缩放干扰——建议固定 <img> 尺寸并设 style="max-width:90%" 防模糊

容易被忽略的兼容性陷阱

移动端 touch 事件的 targetTouches[0].clientX 默认相对于视口，不是图片本身。必须用 getBoundingClientRect() 手动减去图片左上角偏移，再除以当前缩放比例（window.devicePixelRatio 在高清屏下常为 2 或 3）。漏掉这一层，iOS Safari 上热点会整体偏右下约 20%。另外，Safari 对 transform-style: preserve-3d 在 <img> 上的支持不稳定，别试图用 CSS 3D 模拟球面——直接切到 Canvas 或 Three.js 更省事。