最近又有一个需求就是给一组图片,然后让这组图片可以进行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张图片,流畅度还可以。