当前位置：首页 > HTML

h5实现全景图片

2026-01-12 17:32:53HTML

H5 实现全景图片的方法

使用 Three.js 库

Three.js 是一个强大的 3D 库，可以用于创建全景图片效果。以下是一个简单的实现步骤：

引入 Three.js 库

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></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.body.appendChild(renderer.domElement);

创建球体并添加纹理

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

添加控制器实现交互

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.enablePan = false;
camera.position.set(0, 0, 0.1);

渲染循环

h5实现全景图片

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

使用 CSS 3D 变换

对于简单的全景效果，可以使用 CSS 3D 变换：

创建容器和图片元素

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

添加 CSS 样式


.panorama-container {
 width: 100%;
 height: 400px;
 overflow: hidden;
 perspective: 1000px;
}

.panorama-image { width: 100%; height: 100%; object-fit: cover; transform-style: preserve-3d; transition: transform 0.1s; }

h5实现全景图片


3. 添加 JavaScript 交互
```javascript
const container = document.querySelector('.panorama-container');
const image = document.querySelector('.panorama-image');

container.addEventListener('mousemove', (e) => {
    const x = e.clientX / window.innerWidth;
    const y = e.clientY / window.innerHeight;
    image.style.transform = `rotateY(${x * 180}deg) rotateX(${-y * 180}deg)`;
});

使用专门的全景库

Panolens.js 是专门为全景图片和视频设计的库：

引入 Panolens.js

<script src="https://cdn.jsdelivr.net/npm/panolens@0.11.0/build/panolens.min.js"></script>

创建全景查看器

const panorama = new PANOLENS.ImagePanorama('panorama.jpg');
const viewer = new PANOLENS.Viewer();
viewer.add(panorama);

移动端适配

对于移动设备，需要添加陀螺仪支持：

window.addEventListener('deviceorientation', (event) => {
    const alpha = event.alpha;  // z轴旋转
    const beta = event.beta;    // x轴旋转
    const gamma = event.gamma;  // y轴旋转

    // 根据陀螺仪数据更新相机角度
    camera.rotation.set(beta * Math.PI / 180, alpha * Math.PI / 180, gamma * Math.PI / 180);
});