js全景实现
全景图实现基础
全景图通常通过Three.js等3D库实现，核心原理是将全景图贴图到球体或立方体内表面，相机置于中心实现沉浸式浏览。
使用Three.js的步骤
初始化场景与相机
创建场景（THREE.Scene）、透视相机（THREE.PerspectiveCamera），设置相机位置为原点（0,0,0）。
加载全景贴图
使用THREE.TextureLoader加载全景图（equirectangular格式），确保图片比例为2:1以避免变形。
创建球体几何体
生成球体（THREE.SphereGeometry），半径适中（如500），设置scale.x = -1翻转法线，使贴图显示在内侧。
添加控制器
引入THREE.OrbitControls实现鼠标拖拽查看全景，禁用平移（enablePan: false）仅保留旋转。
// 示例代码片段
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('panorama.jpg');
const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1); // 翻转球体
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);
controls.enablePan = false;性能优化建议
- 低分辨率适配：为移动端提供压缩版贴图，减少内存占用。
- 渐进加载：使用
THREE.ProgressiveloadTexture提升大图加载体验。 - 离屏渲染：若需多全景切换，预加载纹理到内存避免卡顿。
替代方案：CSS 3D变换
对于轻量级需求，可用CSS实现伪全景效果：将全景图设为背景，通过transform-style: preserve-3d和旋转事件模拟视角变化。
.panorama-container {
width: 100vw;
height: 100vh;
background: url('panorama.jpg') center/cover;
transform-style: preserve-3d;
}常见问题解决
- 图片接缝问题：确保全景图无缝拼接，Photoshop使用“偏移滤镜”检查接缝。
- 移动端陀螺仪支持：通过
DeviceOrientationEvent监听设备旋转，更新相机角度。 - 跨域资源：若贴图来自CDN，服务器需配置CORS头部。
