Vue结合3D技术实现VR看房效果

效果图： 

1：首先创建一个vue的基础项目
vue create demo
2：启动并打开项目

3。项目中安装threejs

npm install three

4.安装完成再组件如下导入：

import * as THREE from 'three'

5。在template模块中创建一个div，并绑定一个class

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

其次，需要给html，body，默认的容器#app这三类元素设定宽高（必须）
6：在data中定义全局变量

  data() {
    return {
      //相机
      camera: '',
      //场景
      scene: '',
      //网格
      mesh: '',
      //渲染器
      renderer: '',
      //几何体
      geometry: '',
      //材质
      material: '',
      //引入的图片资源
      roomImg: 'https://kh-qg.oss-cn-hangzhou.aliyuncs.com/img/3d-img/img1.jpg',
      //图片的下标
      index: 1,
      //用来控制音频是否播放的标记
      musicFlag: false,
      //引入的音频资源
      mp3,
      //是否全屏
      screenBool: true,
      //音频对象
      audio: '',
      //控制旋转
      rotateBool: true,
      //图片的总数
      sum: 0,
      //纹理加载器
      textureLoader: '',
      //渲染函数
      render: ''
    }
  },

7：在methods中写入方法

methods: {
    //初始化页面数据
    init() {
      let _this = this
      /*----------------------------渲染数据的位置------------------------------*/
      //1、找到渲染数据的位置
      let container = document.getElementsByClassName('container')[0]
      /*-------------------------------场景对象---------------------------------*/
      //2、创建一个场景
      _this.scene = new THREE.Scene()
      //3、创建一个几何
      _this.geometry = new THREE.SphereGeometry(25, 50, 50)
      //4、材质
      _this.material = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        side: THREE.BackSide
      })
      //5、创建网格对象
      _this.mesh = new THREE.Mesh(_this.geometry, _this.material)
      //6、把材质放到场景中
      _this.scene.add(_this.mesh)
      /*-------------------------------纹理对象---------------------------------*/
      //7、纹理加载对象
      _this.textureLoader = new THREE.TextureLoader()
      //8、音频监听器
      let listener = new THREE.AudioListener()
      //9、音频对象
      _this.audio = new THREE.Audio(listener)
      //10、执行资源加载
      let texture = _this.textureLoader.load(_this.roomImg, function() {
        let audioLoader = new THREE.AudioLoader()
        audioLoader.load(_this.mp3, function(AudioBuffer) {
          _this.musicFlag = 0
          _this.audio.setBuffer(AudioBuffer)
          _this.audio.setLoop(true)
          _this.audio.setVolume(0.3)
          //音乐停止
          _this.audio.pause()
        })
        //资源加载结束，开始渲染操作
        _this.render()
      })
      //11、设置材质
      _this.mesh.material.map = texture
      /*-------------------------------设置相机---------------------------------*/
      let width = container.clientWidth
      let height = container.clientHeight
      let k = width / height
      //12、创建相机对象
      _this.camer