vue实现全景

Vue 实现全景效果

在 Vue 中实现全景效果，可以通过第三方库如 panolens.js 或 three.js 结合全景图像来实现。以下是具体实现方法：

使用 panolens.js 实现全景

panolens.js 是基于 three.js 的轻量级全景查看器，适合快速集成到 Vue 项目中。

安装依赖：

npm install panolens three

在 Vue 组件中引入并使用：

<template>
  <div ref="panoramaContainer" class="panorama-container"></div>
</template>

<script>
import * as THREE from 'three';
import { Panorama } from 'panolens';

export default {
  mounted() {
    const panoramaContainer = this.$refs.panoramaContainer;
    const panorama = new Panorama('path/to/panorama-image.jpg');
    const viewer = new PANOLENS.Viewer({
      container: panoramaContainer,
      autoRotate: true,
      autoRotateSpeed: 0.3,
    });
    viewer.add(panorama);
  },
};
</script>

<style>
.panorama-container {
  width: 100%;
  height: 100vh;
}
</style>

使用 three.js 实现全景

如果需要更自定义的功能，可以直接使用 three.js 实现全景效果。

安装依赖：

npm install three

在 Vue 组件中实现：

<template>
  <div ref="rendererContainer" class="panorama-container"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  mounted() {
    const container = this.$refs.rendererContainer;
    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);
    container.appendChild(renderer.domElement);

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

    camera.position.set(0, 0, 0.1);

    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();

    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  },
};
</script>

<style>
.panorama-container {
  width: 100%;
  height: 100vh;
}
</style>

注意事项

• 全景图像需要是等距圆柱投影（Equirectangular Projection）格式。
• 对于移动端适配，需要添加触摸事件控制视角旋转。
• 性能优化可以考虑使用 OrbitControls 或 DeviceOrientationControls 实现交互控制。

以上方法均可根据项目需求调整参数和功能，实现不同效果的全景展示。