最近又有一个需求就是给一组图片，然后让这组图片可以进行360度旋转，准确的说是绕Z轴旋转(Z轴向上)。虽然当初的需求是加载模型，然后让模型进行旋转，但是模型加载出来之后，three.js的材质效果不是很好，所有就改了方案，先把效果好的模型宣出图片，然后宣出足够的图片，然后进行旋转。这个效果自己也是可以写的，但是为了快，就在网上找了一个插件来快速实现。（spritespin官网）
1.首先安装这个插件
npm install spritespin
2.按照官网提供的方法，把这个插件融入到vue中。可以看出来这个插件使用jquery的，那么vue中，需要引入jquery(vue 如何引入 jquery这里就不展开了，可自行查资料)
引入需要的插件
import Vue from 'vue';import $ from 'jquery';import * as SpriteSpin from 'spritespin';
3.创建一个spritespin的组件，可单独放在vue文件中，通过插件方式引入
ponent('spritespin', {props: ['options'],template: '<div></div>',data: function () {return {api: null,data: null};},mounted: function () {// create spritespin$(this.$el).spritespin(this.options);// access api objectthis.api = $(this.$el).spritespin('api');// access data objectthis.data = $(this.$el).spritespin('data');// watch changes and update spritespinthis.$watch('options', (newVal, oldVal) => {console.log('options');$(this.$el).spritespin(newVal);});},updated: function () {$(this.$el).spritespin(this.options);},beforeDestroy: function () {// destroy spritespin before Vue node is destroyed$(this.$el).spritespin('destroy');}});
4.template中引入组件
<spritespin v-bind:options="options" ref="spritespin" />
5.添加显示数据
options: {source: SpriteSpin.sourceArray('static/img/test2/tbrender_' + '00{frame}.png',{ frame: [1, 36], digits: 3 }),animate: false,width: 270,height: 480,// frames: 36,sense: 1},
6.模型添加成功，并且可以移动鼠标让他旋转。图片旋转的流畅度取决于多少张图片，大概就是36张图片，流畅度还可以。
