vue 引入 360度图片旋转插件 SpriteSpin.js

最近又有一个需求就是给一组图片，然后让这组图片可以进行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文件中，通过插件方式引入

Vue.component('spritespin', {
  props: ['options'],
  template: '<div></div>',
  data: function () {
    return {
      api: null,
      data: null
    };
  },
  mounted: function () {
    // create spritespin
    $(this.$el).spritespin(this.options);
    // access api object
    this.api = $(this.$el).spritespin('api');
    // access data object
    this.data = $(this.$el).spritespin('data');
    // watch changes and update spritespin
    this.$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张图片，流畅度还可以。