无需借助Google Maps，如何在网站嵌入Photosphere？

方案1：Three.js原生实现 #

这是目前最稳定、可定制性最强的方案，依赖活跃维护的Three.js库，步骤如下：

1. 确认图片格式：确保你的Photosphere是等矩形投影格式（绝大多数Photosphere拍摄设备默认输出此格式）。

2. 引入Three.js资源：使用官方稳定版的Three.js核心库和轨道控制器（用于交互）。

3. 核心实现代码：

<div id="panorama-container" style="width: 100vw; height: 100vh;"></div>

<script>
// 初始化基础组件
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('panorama-container').appendChild(renderer.domElement);

// 创建内部可见的全景球体
const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1); // 反转球体，让材质在内部显示
const textureLoader = new THREE.TextureLoader();
// 替换为你的Photosphere图片路径（同域或已配置CORS）
textureLoader.load('your-photosphere-image.jpg', texture => {
  const material = new THREE.MeshBasicMaterial({ map: texture });
  const sphere = new THREE.Mesh(geometry, material);
  scene.add(sphere);
});

// 添加交互控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.set(0, 0, 0.1); // 相机置于球内中心
controls.enableZoom = true;
controls.enablePan = false;
controls.minDistance = 0.1;
controls.maxDistance = 1;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

// 窗口大小适配
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>

4. 关键注意事项：

• 若图片存储在外部域名，需确保该服务器配置了CORS允许跨域访问，否则图片无法加载。
• 可根据需求调整球体尺寸、相机视角、交互规则（比如禁用旋转、修改缩放范围）。

方案2：使用封装好的全景库 #

如果不想编写原生Three.js代码，可选择基于Three.js封装的成熟全景库，比如：

• Photo Sphere Viewer：功能全面，支持热点标注、陀螺仪控制、全屏模式等，仅需几行代码即可实现渲染：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@5/dist/photo-sphere-viewer.min.css">
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@5/dist/photo-sphere-viewer.min.js"></script>

<div id="viewer" style="width: 100vw; height: 100vh;"></div>

<script>
const viewer = new PhotoSphereViewer.Viewer({
  container: document.querySelector('#viewer'),
  panorama: 'your-photosphere-image.jpg', // 替换为你的图片路径
  defaultZoomLvl: 3,
  mousewheel: true,
  touchmoveTwoFingers: true,
});
</script>

旧方案失效原因说明 #

• Google的plusone.js属于废弃API，仅保留基础兼容性，不支持自定义非Google托管的全景图。
• 你尝试的旧photosphere项目依赖的Three.js版本过旧，其中CanvasRenderer早已被移除（当前Three.js默认使用WebGLRenderer），因此会抛出构造函数不存在的错误。

内容的提问来源于stack exchange，提问作者Philip Colmer