当前位置：首页 > VUE

vue实现全景

2026-03-07 01:41:49VUE

Vue 实现全景效果的方法

使用 Three.js 和 Vue 结合

安装 Three.js 依赖：

npm install three

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

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default {
  mounted() {
    this.initScene();
  },
  methods: {
    initScene() {
      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);
      this.$refs.container.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 mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

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

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

使用现成的全景库

安装 panorama 库：

npm install vue-panorama

在组件中使用：

import { Panorama } from 'vue-panorama';

export default {
  components: {
    Panorama
  }
}

模板部分：

<panorama src="panorama.jpg"></panorama>

使用 CSS3 实现简单全景

通过 CSS 变换创建基本全景效果：

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

样式部分：

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

.panorama-image {
  height: 100%;
  transition: transform 0.1s;
  transform-origin: center center;
}

添加鼠标交互：

export default {
  mounted() {
    const container = this.$el.querySelector('.panorama-container');
    const image = this.$el.querySelector('.panorama-image');

    container.addEventListener('mousemove', (e) => {
      const x = e.clientX - container.getBoundingClientRect().left;
      const y = e.clientY - container.getBoundingClientRect().top;
      const centerX = container.offsetWidth / 2;
      const centerY = container.offsetHeight / 2;
      const moveX = (x - centerX) / 50;
      const moveY = (centerY - y) / 50;

      image.style.transform = `translateX(${moveX}px) translateY(${moveY}px)`;
    });
  }
}