vue实现全景图

Vue 实现全景图的方法

使用 Three.js 和 Vue 结合

安装依赖库：

npm install three

在 Vue 组件中引入 Three.js 并创建全景图场景：

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

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

export default {
  mounted() {
    this.initPanorama();
  },
  methods: {
    initPanorama() {
      const container = this.$refs.container;
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(container.clientWidth, container.clientHeight);
      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.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);

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

      let isDragging = false;
      let previousMousePosition = { x: 0, y: 0 };
      container.addEventListener('mousedown', () => { isDragging = true; });
      container.addEventListener('mouseup', () => { isDragging = false; });
      container.addEventListener('mousemove', (event) => {
        if (!isDragging) return;
        const deltaMove = {
          x: event.clientX - previousMousePosition.x,
          y: event.clientY - previousMousePosition.y
        };
        sphere.rotation.y += deltaMove.x * 0.01;
        sphere.rotation.x += deltaMove.y * 0.01;
        previousMousePosition = { x: event.clientX, y: event.clientY };
      });
    }
  }
};
</script>

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

使用现成的 Vue 全景图组件

安装 vue-panorama 组件：

npm install vue-panorama

在 Vue 项目中使用：

<template>
  <vue-panorama :src="panoramaImage" />
</template>

<script>
import VuePanorama from 'vue-panorama';

export default {
  components: {
    VuePanorama
  },
  data() {
    return {
      panoramaImage: require('@/assets/panorama.jpg')
    }
  }
}
</script>

使用 PhotoSphereViewer 库

安装 PhotoSphereViewer：

npm install photo-sphere-viewer

在 Vue 组件中使用：

<template>
  <div ref="viewer" class="panorama-viewer"></div>
</template>

<script>
import { Viewer } from 'photo-sphere-viewer';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';

export default {
  mounted() {
    this.initViewer();
  },
  methods: {
    initViewer() {
      const viewer = new Viewer({
        container: this.$refs.viewer,
        panorama: 'path/to/panorama.jpg',
        size: {
          width: '100%',
          height: '100vh'
        }
      });
    }
  }
};
</script>

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

注意事项

确保全景图是等距柱状投影格式（equirectangular projection），这是大多数全景图查看器支持的标准格式。

对于移动设备支持，需要添加触摸事件处理，Three.js 示例中可以添加类似以下代码：

container.addEventListener('touchstart', () => { isDragging = true; });
container.addEventListener('touchend', () => { isDragging = false; });
container.addEventListener('touchmove', (event) => {
  if (!isDragging) return;
  const deltaMove = {
    x: event.touches[0].clientX - previousMousePosition.x,
    y: event.touches[0].clientY - previousMousePosition.y
  };
  sphere.rotation.y += deltaMove.x * 0.01;
  sphere.rotation.x += deltaMove.y * 0.01;
  previousMousePosition = { x: event.touches[0].clientX, y: event.touches[0].clientY };
});

考虑添加加载状态和错误处理，提升用户体验：

const textureLoader = new THREE.TextureLoader();
textureLoader.load(
  'path/to/panorama.jpg',
  (texture) => {
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const sphere = new THREE.Mesh(geometry, material);
    scene.add(sphere);
  },
  undefined,
  (error) => {
    console.error('Error loading panorama:', error);
  }
);