h5实现全景

H5 实现全景效果的方法

H5 实现全景效果通常通过 WebGL、Three.js 或 CSS3D 技术实现，以下是几种常见方案：

使用 Three.js 实现 360° 全景

Three.js 是一个基于 WebGL 的 3D 库，适合实现交互式全景效果。

1. 引入 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>

2. 创建全景场景：

   
   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 textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load('panorama.jpg'); const geometry = new THREE.SphereGeometry(500, 60, 40); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide }); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere);

// 添加控制器 const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom = false; camera.position.z = 0.1;

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

#### 使用 CSS3D 实现简单全景

对于性能要求不高的场景，可以使用 CSS3D 变换：

1. HTML 结构：
```html
<div class="panorama-container">
  <div class="panorama"></div>
</div>

1. CSS 样式：

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

.panorama { width: 200%; height: 100%; background-image: url('panorama.jpg'); background-size: cover; transform-style: preserve-3d; transition: transform 0.1s; }

3. JavaScript 控制：
```javascript
const panorama = document.querySelector('.panorama');
let rotationX = 0;

document.addEventListener('mousemove', (e) => {
  rotationX = (e.clientX / window.innerWidth) * 100;
  panorama.style.transform = `translateZ(-500px) rotateY(${rotationX}deg)`;
});

使用全景图库

现有库如 Pannellum 可以快速实现：

1. 引入 Pannellum：

   <link rel="stylesheet" href="https://pannellum.org/css/pannellum.css"/>
   <script src="https://pannellum.org/js/pannellum.js"></script>

2. 初始化：

   pannellum.viewer('panorama-container', {
   "type": "equirectangular",
   "panorama": "panorama.jpg",
   "autoLoad": true
   });

性能优化建议

• 使用压缩后的全景图（推荐 8000×4000 分辨率以下）
• 考虑使用立方体贴图代替球体贴图减少渲染负担
• 移动端添加陀螺仪支持：

  window.addEventListener('deviceorientation', (e) => {
  camera.rotation.y = e.alpha * (Math.PI / 180);
  camera.rotation.x = e.beta * (Math.PI / 180);
  });

注意事项

• 全景图建议使用等距圆柱投影（Equirectangular）格式
• 跨域问题需确保图片服务器配置 CORS
• 移动端注意 touch 事件处理
• VR 模式需要添加 WebVR 相关 polyfill

以上方案可根据项目需求选择，Three.js 方案功能最强大但学习成本较高，CSS3D 适合简单场景，现成库则最快速但自定义程度有限。