先看效果

动画.gif

整体思路是用three.js实现一个正方体，然后在正方体的六个面贴上前后左右上下（如下图）六张图片，再把camera放在正方体内，实现VR

全景图切割工具:matheowis.github.io/HDRI-to-Cub…

1 实现步骤

首先在vue项目里安装three.js第三方库

npm install three

引入three.js和轨道控制器OrbitControls

Three.js 中的 OrbitControls 是一个用于控制相机围绕目标旋转以及缩放、平移等操作的控制器

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

下面是具体方法：要实现3d图形的展示，大致是以下思路：

创建三维场景(Scene)
选择视觉点并确认视觉位置角度(Camera)
添加物体供观察
渲染场景(Renderer)

   drawCube () {
      // 创建场景
      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);
      // 将渲染器dom添加到页面的容器中
      this.$refs.container.appendChild(renderer.domElement);
      // 创建一个立方体几何对象
      const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
      // 我们将6个视觉的图片贴到立方体的6个面
      let picList = ["px", "nx", "py", "ny", "pz", "nz",];
      let boxMaterials = [];
      picList.forEach((item) => {
        let texture = new THREE.TextureLoader().load(
          require(`@/assets/${item}.png`)
        );
        boxMaterials.push(new THREE.MeshBasicMaterial({ map: texture }));
      });
      const cube = new THREE.Mesh(boxGeometry, boxMaterials);
      // 在场景中加入创建的立方体
      scene.add(cube);
      cube.geometry.scale(10, 10, -10);
      camera.position.z = 5
      // 添加轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement);
      const animate = function () {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();
    }

注释1 Scene

场景是我们所有物体的容器，通俗来讲就相当于我们的世界

注释2 右手坐标系

threejs采用的是右手坐标系

x轴水平方向: 向右为正
y轴垂直方向: 向上为正
z轴内外方向(垂直于xy平面): 向外为正

注释3 Renderer

渲染器渲染我们精心制作的场景

注释4透视投影相机`PerspectiveCamera`：视锥体

透视投影相机的四个参数**fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。

Three.js+vue实现vr在线旅游