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

2023年2月9日 554次阅读 来源: 熊筒子

近来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地点: https://github.com/xiongtongz…

假如遇到问题,迎接提出,一同完美插件轻易更多人.(会延续保护)

末了根据通例求个 STAR~

    原文作者：熊筒子
    原文地址: https://segmentfault.com/a/1190000017712733
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞