vue使用three.js加载.FBX模型文件

1.需要安装的依赖

//three依赖
 yarn add three
 
//tween.js依赖
 yarn add @tweenjs/tween.js 

2. 封装组件 draw.vue 放在components中

3.tween.js 放在utils 文件夹下 为了平滑的动画效果

TweenJS：提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性，并允许链接补间动画和行动结合起来，创造出复杂的序列。

import TWEEN from '@tweenjs/tween.js'

export default {
  install: function(Vue) {
    Vue.prototype.$tween = this
    Vue.prototype.$tweener = TWEEN
  },
  pause: function(tw) {
    tw.pause()
  },
  fade: function(target, to, during, delay, easing, onUpdate, onComplete) {
    if (!target || !to) {
      return
    }
    if (during == null) {
      during = 260
    }

    const tw = new TWEEN.Tween(target).to(to, during)
    if (delay) tw.delay(delay)
    tw.easing(easing || TWEEN.Easing.Linear.None)
    if (onUpdate) tw.onUpdate(onUpdate)
    if (onComplete) tw.onComplete(onComplete)
    tw.start()
    return tw
  }
}

4.在main.js 中配置一下tween

/** 动画 */
import tween from './utils/tween'
Vue.use(tween)

在页面里正式使用

大功告成，吃饭大吉！

ps: 曾以为走不出的日子，现在都回不去了。