移动端h5全景图实现

移动端H5全景图实现方法

使用Three.js库

Three.js是一个强大的3D JavaScript库，适用于在H5中实现全景图效果。通过加载360度全景图片，创建球体几何体并映射纹理，可以实现沉浸式全景体验。

安装Three.js库：

npm install three

基础实现代码：

import * as THREE from 'three';

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.body.appendChild(renderer.domElement);

const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1);
const texture = new THREE.TextureLoader().load('panorama.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);
camera.position.z = 0.1;

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

使用PhotoSphereViewer插件

PhotoSphereViewer是一个专门用于展示全景图的轻量级库，内置触摸控制和陀螺仪支持，适合移动端H5开发。

安装方法：

npm install photo-sphere-viewer

基础使用示例：

import { Viewer } from 'photo-sphere-viewer';

const viewer = new Viewer({
    container: document.getElementById('viewer'),
    panorama: 'panorama.jpg',
    size: {
        width: '100%',
        height: '100vh'
    },
    navbar: [
        'zoom',
        'move',
        'download',
        'fullscreen'
    ],
    touchmoveTwoFingers: true
});

CSS3变换实现

对于简单的全景效果，可以使用CSS3的transform属性结合touch事件实现基础全景浏览。

HTML结构：

<div class="panorama-container">
    <img src="panorama.jpg" class="panorama-image">
</div>

CSS样式：

.panorama-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.panorama-image {
    width: auto;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript控制：

const panorama = document.querySelector('.panorama-image');
let startX, currentX = 0;

panorama.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
});

panorama.addEventListener('touchmove', (e) => {
    const moveX = e.touches[0].clientX;
    const diffX = moveX - startX;
    currentX += diffX * 0.1;

    panorama.style.transform = `translateX(${currentX}px)`;
    startX = moveX;
});

性能优化建议

移动端H5全景图需要考虑性能优化，特别是低端设备上的表现。建议将全景图分割为多个小块，使用多级纹理加载策略。避免单张超大图片，采用适合设备屏幕分辨率的图片版本。

陀螺仪集成可以增强用户体验，通过DeviceOrientation API实现：

window.addEventListener('deviceorientation', (e) => {
    const beta = e.beta;  // -180到180
    const gamma = e.gamma; // -90到90

    // 根据设备旋转角度调整视角
    camera.rotation.x = THREE.MathUtils.degToRad(beta);
    camera.rotation.y = THREE.MathUtils.degToRad(gamma);
});

兼容性处理

不同浏览器对WebGL和触摸事件的支持程度不同，需要做好降级方案。检测WebGL支持情况：

function isWebGLAvailable() {
    try {
        const canvas = document.createElement('canvas');
        return !!(window.WebGLRenderingContext && 
                 (canvas.getContext('webgl') || 
                  canvas.getContext('experimental-webgl')));
    } catch (e) {
        return false;
    }
}

if (!isWebGLAvailable()) {
    // 显示替代内容或提示
}