本文详解如何在网页中通过按钮点击实时切换 panolens.js 加载的多个 360° 全景图，涵盖初始化 viewer、预加载图像路径、安全替换场景及 dom 事件绑定等核心步骤，并提供可直接运行的完整示例代码。
本文详解如何在网页中通过按钮点击实时切换 panolens.js 加载的多个 360° 全景图，涵盖初始化 viewer、预加载图像路径、安全替换场景及 dom 事件绑定等核心步骤，并提供可直接运行的完整示例代码。
Panolens.js 是一个基于 Three.js 的轻量级 360° 全景查看器库，但其 Viewer 实例不支持直接“更新”当前全景图——必须先释放旧场景资源，再加载新图像。初学者常误以为调用 add() 即可覆盖，实则会导致内存泄漏或渲染异常。正确做法是：复用同一 Viewer 实例，每次切换前调用 viewer.dispose() 清理旧内容，再添加新 ImagePanorama。
以下是一个结构清晰、生产就绪的实现方案：
✅ 核心逻辑说明
- 所有图像路径统一存入数组（如 images = ['img1.jpg', 'img2.jpg']），便于通过索引快速访问；
- 按钮使用 data-index 属性标记当前关联图像索引（初始值为 0 或 1）；
- 点击时动态切换索引（如 1 - index 实现 0↔1 互换），读取对应路径；
- 关键步骤：viewer.dispose() → viewer.add(new PANOLENS.ImagePanorama(url))。
? 完整可运行代码
<meta charset="UTF-8"><title>360° 图像切换示例</title><style>
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; overflow: hidden; }
.image-container { width: 100%; height: 100vh; }
button {
position: absolute;
top: 1rem; left: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
z-index: 10;
cursor: pointer;
}
</style><button data-index="0">切换至风景图</button>
<button data-index="1" style="left: auto; right: 1rem;">切换至城市图</button>
<div class="image-container"></div>
<!-- 注意：Three.js 必须在 Panolens 之前加载 -->
<script src="https://pchen66.github.io/js/three/three.min.js"></script><script src="https://pchen66.github.io/js/panolens/panolens.min.js"></script><script>
document.addEventListener('DOMContentLoaded', () => {
const viewer = new PANOLENS.Viewer({
container: document.querySelector('.image-container'),
output: 'console' // 可选：启用调试日志
});
// 预定义图像路径（支持本地或 CDN）
const images = [
'https://pchen66.github.io/Panolens/examples/asset/textures/equirectangular/field.jpg',
'https://static.wixstatic.com/media/28cb8a_02e9916ab748463bab3a0241d249231a~mv2.jpg'
];
// 初始加载第一张图
let currentPanorama = new PANOLENS.ImagePanorama(images[0]);
viewer.add(currentPanorama);
// 绑定所有按钮事件
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', function() {
const idx = Number(this.dataset.index);
// 释放当前全景图（重要！防止内存泄漏）
if (currentPanorama) viewer.remove(currentPanorama);
// 创建并添加新全景图
currentPanorama = new PANOLENS.ImagePanorama(images[idx]);
viewer.add(currentPanorama);
// 可选：重置视角到默认方向
viewer.resetOrientation();
});
});
});
</script>
⚠️ 注意事项与最佳实践
- 资源清理不可省略：务必使用 viewer.remove(panorama)（推荐）或 viewer.dispose()（会清空全部内容）来卸载旧图像；仅 add() 不移除旧对象将导致多图叠加、性能骤降。
- 路径可靠性：线上示例使用了跨域图片链接，若加载本地图片，请确保服务支持 CORS，或使用本地开发服务器（如 VS Code Live Server）。
- 用户体验优化：可添加加载状态提示（如按钮禁用 + loading 文字），避免用户重复点击；也可配合 viewer.tweenControl 平滑过渡视角。
- 扩展性建议：图像数量较多时，改用 Map 存储 {id: url} 并通过 btn.dataset.id 关联，更易维护。
掌握这一模式后，你不仅能切换图像，还可延伸实现自动轮播、热点导航、多层级场景跳转等功能——Panolens.js 的灵活性正源于对底层 Three.js 场景的精准控制。
