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

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

threejs improt-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 improt-three-examples --save-dev

webpack的配置：

const ThreeExamples = require('improt-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)
})

......
......

如果遇到问题，欢迎提出，一起完善插件方便更多人。（会持续维护）

最后按照惯例求个 STAR~
github： https://github.com/xiongtongzi/improt-three-examples

转载处：https://juejin.im/post/5c2c2f9af265da61285a3962