threeJs模組化開發解決方案 import-three-examples

xiongtongzi發表於2019-01-02
JSImport

最近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~



相關文章