这篇教程带大家了解使用Vue、Three.js实现全景图的方法，希望大家能从中学到一些关键性的思路，废话不多说，开整~~
一、首先我们需要创建一个Vue工程
本文主要详细记录搭建全景图的过程，故搭建Vue工程不在过多描述。
二、安装Three.js
npm install three --savenpm install three-trackballcontrols --savenpm install three-orbit-controls --savenpm i three-obj-mtl-loader --savenpm i three-fbx-loader --savenpm i three-stats --save
three-trackballcontrols：轨迹球控件，最常用的控件，可以使用鼠标轻松的移动、平移，缩放场景。
three-orbit-controls ：三维场景操作插件。其实在 npm install three 的时候已经下载对应的插件， 在 node_modules 文件夹下找到 three/examples/jsm/controls/OrbitControls 这个路径里面也能找到对应的插件。
three-obj-mtl-loader：加载 .obj 模型文件 , .mtl 材质信息文件的插件。
three-fbx-loader：fbx模型文件的插件。
three-stats：性能检测插件，可以监控动画运行的帧数。
三、渲染器-renderer， 场景-scene，相机-camera
Three.js中，场景可理解为是一个容器，我们可以将需要的物体放入场景中。相机的作用在场景中取一个合适的景，把它拍下来。渲染器的作用就是将相机拍摄下来的图片，渲染至浏览器展示。
四、具体实现
1、引入依赖
import * as THREE from "three";import * as ThreeStats from 'three-stats'const OrbitControls = require('three-orbit-controls')(THREE);2、定义变量
data() { return { renderer: '', //渲染器 scene: '', //场景 light: '', //光源 camera: '', //相机 controls: '', //控制器 stats: '', //性能监控器 mygroup: '', //模型组 action: '', //控制动画的值 clock: '', //时钟 mixer: '', //混合实例 rotateAnimate: '', //旋转动画 sRotate: 1, //是否开启旋转 }}3、初始化渲染器
rendererInit() { var width = 1000; var height = 800; this.renderer = new THREE.WebGLRenderer(); this.renderer.setClearColor(0xffffff); this.renderer.setSize(width, height); // 通过 this.$refs获取页面的dom并绑定渲染器 this.$refs.threeDom.appendChild(this.renderer.domElement);}4、初始化场景
sceneInit() { this.scene = new THREE.Scene(); var ambient = new THREE.AmbientLight(0x444444, 3); //添加光源 颜色和光照强度 var axisHelper = new THREE.AxesHelper(600); //添加辅助坐标系 this.scene.add(ambient, axisHelper);},AmbientLight：环境光，会均匀的照亮场景中的所有物体。不能用来投射阴影，因为它没有方向。
AmbientLight( color : Integer, intensity : Float )
color - (参数可选）颜色的rgb数值。缺省值为 0xffffff。
intensity - (参数可选)光照的强度。缺省值为 1。
AxesHelper：用于简单模拟3个坐标轴的对象。红色代表 X 轴，绿色代表 Y 轴，蓝色代表 Z 轴。
AxesHelper( size : Number )
size -- (可选的) 表示代表轴的线段长度. 默认为 1。
5、创建模型
modelling(){ this.mygroup = new THREE.Group(); var textureLoader = new THREE.TextureLoader(); //创建纹理贴图 var img = textureLoader.load(require('../../public/img/home3.jpeg')); var geometry = new THREE.SphereGeometry(130, 256, 256); // 球体网格模型 var material = new THREE.MeshLambertMaterial({ map: img, //设置颜色贴图属性值 side: THREE.DoubleSide, //双面渲染 }); var meshSphere = new THREE.Mesh(geometry, material); //网格模型对象Mesh meshSphere.name = '球体容器'; this.mygroup.add(meshSphere); var canvasText = this.getcanvers('进门'); //生成一个canvers 文字图案对象 var texture = new THREE.CanvasTexture(canvasText); var geometryText = new THREE.PlaneGeometry(16, 10, 60, 60); var materialText = new THREE.MeshPhongMaterial({ map: texture, // 设置纹理贴图 side: THREE.DoubleSide, //双面渲染 }); var meshText = new THREE.Mesh(geometryText, materialText); meshText.name = '进门'; meshText.position.set(40, 20, -90) this.mygroup.add(meshText); this.scene.add(this.mygroup); this.addAnimation(); //添加并开启动画 this.refresh();}// 生成一个canvers图案getcanvers(text) { var canvasText = document.createElement("canvas"); var c = canvasText.getContext('2d'); // 矩形区域填充背景 c.fillStyle = "#FFFFFF"; //canver背景 c.fillRect(0, 0, 300, 200); //生成一个矩形 c.translate(160, 80); c.fillStyle = "#000000"; //文本填充颜色 c.font = "bold 100px 宋体"; //字体样式设置 c.textBaseline = "middle"; //文本与 c.textAlign = "center"; //文本居中 c.fillText(text, 0, 0); return canvasText;}SphereGeometry：一个用于生成球体的类。
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
radius — 球体半径，默认为1。
widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为8。
heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为6。
phiStart — 指定水平（经线）起始角度，默认值为0。。
phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
thetaStart — 指定垂直（纬线）起始角度，默认值为0。
thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。
MeshLambertMaterial：一种非光泽表面的材质，没有镜面高光。
<