当前位置：首页 > HTML

h5实现全景

2026-03-06 08:41:51HTML

H5实现全景效果的方法

H5实现全景效果通常可以通过WebGL、Three.js等库来实现。以下是几种常见的方法：

使用Three.js库

Three.js是一个基于WebGL的3D图形库，适合用于创建全景效果。需要加载一张全景图片（通常是等距柱状投影图），并将其映射到一个球体或立方体内部。

// 初始化场景、相机和渲染器
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.set(0, 0, 0.1);

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

使用Pannellum库

Pannellum是一个轻量级的全景查看器，适合快速实现全景效果。支持等距柱状投影和立方体贴图。

<!DOCTYPE html>
<html>
<head>
    <title>全景示例</title>
    <script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">
</head>
<body>
    <div id="panorama" style="width:100%;height:400px;"></div>
    <script>
        pannellum.viewer('panorama', {
            "type": "equirectangular",
            "panorama": "panorama.jpg",
            "autoLoad": true
        });
    </script>
</body>
</html>

使用WebVR API

如果需要支持VR设备，可以使用WebVR API结合Three.js实现交互式全景体验。

// 初始化WebVR场景
const vrButton = document.getElementById('vr-button');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.vr.enabled = true;
document.body.appendChild(renderer.domElement);

// 添加VR按钮
document.body.appendChild(WEBVR.createButton(renderer));

// 加载全景纹理
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);

// 渲染循环
renderer.setAnimationLoop(function() {
    renderer.render(scene, camera);
});

使用CSS 3D变换

对于简单的全景效果，可以使用CSS 3D变换实现，但性能和交互性不如WebGL方案。

<!DOCTYPE html>
<html>
<head>
    <style>
        .panorama-container {
            width: 100%;
            height: 400px;
            perspective: 1000px;
            overflow: hidden;
        }
        .panorama {
            width: 100%;
            height: 100%;
            background-image: url('panorama.jpg');
            background-size: auto 100%;
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            transition: transform 0.1s;
        }
    </style>
</head>
<body>
    <div class="panorama-container">
        <div class="panorama" id="panorama"></div>
    </div>
    <script>
        const panorama = document.getElementById('panorama');
        let rotation = 0;
        document.addEventListener('mousemove', (e) => {
            rotation = (e.clientX / window.innerWidth) * 360;
            panorama.style.transform = `rotateY(${rotation}deg)`;
        });
    </script>
</body>
</html>