threeJs模块化开发解决方案 import-three-examples

最近three的老项目要迁移到已有的vue后台中，但发现threeJs的插件npm的包真少，老项目中每引一个插件就得专门去修改文件中的import exports.

So,干脆写了一个webpack插件使three-examples中的全部的第三方库都能正常引入.

废话很少说了.直接上使用方法了

须要的依赖:

cnpm i three --save复制代码

cnpm i imports-loader exports-loader --save-dev复制代码

cnpm i import-three-examples --save-dev复制代码

webpack的配置：

const ThreeExamples = require('import-three-examples')

module.exports = {
  ......
  ......
  module: {
    rules: [
      ......
      ......
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      ...ThreeExamples
    ]
  }
}复制代码

渲染进程：

import OrbitControls from "three/examples/js/controls/OrbitControls"
import FBXLoader from "three/examples/js/loaders/FBXLoader"
// three/examples/js的其余第三方库 引入方式同上
// 实例建立方式以下
......
......

let controls = new OrbitControls(camera, el)

let fbx = new FBXLoader()

fbx.load(url, function (_obj) {
  console.log(_obj)
})

......
......复制代码

github地址：github.com/xiongtongzi…

若是遇到问题，欢迎提出，一块儿完善插件方便更多人。（会持续维护）

最后按照惯例求个 STAR~