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张图片,流畅度还可以。

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小猴子编程

请支持一下我的分享

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值