当前位置：首页 > VUE

vue360全景实现

2026-01-23 13:48:10VUE

Vue 360 全景实现方案

使用 Three.js 库

Three.js 是一个强大的 3D 库，可用于创建 360 全景效果。在 Vue 项目中安装 Three.js：

npm install three

创建一个 Vue 组件，加载全景图片并渲染：

<template>
  <div ref="container"></div>
</template>

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

export default {
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      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 material = new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('panorama.jpg')
      });
      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();

      const onMouseMove = (event) => {
        const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
        const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
        camera.rotation.y = mouseX * Math.PI;
        camera.rotation.x = mouseY * Math.PI;
      };
      window.addEventListener('mousemove', onMouseMove);
    }
  }
};
</script>

使用 Pannellum 库

Pannellum 是一个轻量级的 360 度图像查看器，适合 Vue 项目集成：

vue360全景实现

npm install pannellum

在 Vue 组件中使用：

<template>
  <div id="panorama" ref="panorama"></div>
</template>

<script>
import pannellum from 'pannellum';

export default {
  mounted() {
    this.initPannellum();
  },
  methods: {
    initPannellum() {
      pannellum.viewer('panorama', {
        type: 'equirectangular',
        panorama: 'panorama.jpg',
        autoLoad: true,
        showControls: true
      });
    }
  }
};
</script>

<style>
#panorama {
  width: 100%;
  height: 500px;
}
</style>

使用 A-Frame 框架

A-Frame 是一个 WebVR 框架，支持 360 全景：

vue360全景实现

npm install aframe

Vue 组件示例：

<template>
  <a-scene>
    <a-sky src="panorama.jpg" rotation="0 -90 0"></a-sky>
    <a-camera></a-camera>
  </a-scene>
</template>

<script>
import 'aframe';

export default {
  name: 'VrView'
};
</script>

移动设备适配

为支持移动设备触摸操作，在 Three.js 方案中添加：

const onTouchMove = (event) => {
  event.preventDefault();
  const touchX = event.touches[0].clientX;
  const touchY = event.touches[0].clientY;
  camera.rotation.y = (touchX / window.innerWidth) * 2 * Math.PI;
  camera.rotation.x = (touchY / window.innerHeight) * 2 * Math.PI;
};
window.addEventListener('touchmove', onTouchMove);

性能优化

对于大型全景图，使用渐进加载或分片加载：

const texture = new THREE.TextureLoader().load(
  'panorama-low-res.jpg',
  () => {
    texture.dispose();
    new THREE.TextureLoader().load('panorama-high-res.jpg', (highResTexture) => {
      sphere.material.map = highResTexture;
      sphere.material.needsUpdate = true;
    });
  }
);

标签: 全景