最近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)
})
......
......
github地址: https://github.com/xiongtongz...
如果遇到問題,歡迎提出,一起完善插件方便更多人.(會持續維護)
最後按照慣例求個 STAR~